Александр

const updateItems = async ({ id, isShow = false }: Partial<{ id: number, isShow: boolean }>) => {};

Object.fromEntries(Object.entries(...).map(([key, value]) => [key, [value]]));

Зависит как минимум от свойства display

Function.prototype.apply() принимает первым аргументом контекст (this), с которым будет работать, в Вашем случае - person. Вторым аргументом принимает массив аргументов вызова функции, которую вызываете при помощи .apply. Можете почитать подробнее на MDN и learn.javascript.ru.

1. Необходимо создать Path2D один раз, а у Вас в него добавляется новый прямоугольник на каждой итерации render. Что-то вроде:

const createPath = (x, y) => {
  const path = new Path2D();
  path.roundRect(x, y, 200, 40, 30);
  return path;
};

let taskList = [
  { id: 0, value: "", x: 150, y: 75 },
  { id: 0, value: "", x: -150, y: 75 },
].map((entry) => ({ ...entry, path: createPath(entry.x, entry.y) }));

2. Храните позицию камеры и перемещайте холст на каждой итерации render.
Добавляем переменные для отслеживания позиции камеры на холсте.

let cameraX = 0;
let cameraY = 0;

Обновляем позицию камеры на холсте.

addEventListener("mousemove", ({ button, clientX, clientY }) => {
  if (pressMM) {
    cameraX += clientX - lastX;
    cameraY += clientY - lastY;
    lastX = clientX;
    lastY = clientY;
  }
});

Рисуем элементы с учетом позиции камеры холста.

const drawTasks = () => {
  context.clearRect(0, 0, canvas.width, canvas.height);
  context.save();
  context.translate(cameraX, cameraY);

  for (const { x, y, path, value } of taskList) {
    context.beginPath();
    context.stroke(path);
  }

  context.restore();
};

Второй пример сначала дополните всеми изменениями и после решайте, насколько корректное поведение.

Вставляйте ссылку программно после инициализации.

На основе демки из документации.

import * as React from "react";
import { DemoContainer } from "@mui/x-date-pickers/internals/demo";
import { AdapterDayjs } from "@mui/x-date-pickers/AdapterDayjs";
import { LocalizationProvider } from "@mui/x-date-pickers/LocalizationProvider";
import { DatePicker } from "@mui/x-date-pickers/DatePicker";
import { StaticDatePicker } from "@mui/x-date-pickers/StaticDatePicker";
import dayjs, { Dayjs } from "dayjs";

export default function BasicDatePicker() {
  const [date, setDate] = React.useState<Dayjs | null>(dayjs());

  const onDateChange = React.useCallback((value: Dayjs) => {
    setDate(value);
  }, []);

  return (
    <LocalizationProvider dateAdapter={AdapterDayjs}>
      <DemoContainer components={["DatePicker", "StaticDatePicker"]}>
        <DatePicker<Dayjs>
          value={date}
          views={["month"]}
          onChange={onDateChange}
        />
        <StaticDatePicker<Dayjs>
          value={date}
          orientation="landscape"
          onChange={onDateChange}
        />
      </DemoContainer>
    </LocalizationProvider>
  );
}

https://codesandbox.io/s/qna-q-1289372-527d47

На основе https://www.30secondsofcode.org/js/s/to-camel-case/.

const toCamelCase = (string = '') => {
  const value = (string.toLowerCase().match(/[a-z]+[0-9]*|[0-9]+/g) ?? [])
    .map((x) => x.slice(0, 1).toUpperCase() + x.slice(1))
    .join('');

  return value.slice(0, 1).toLowerCase() + value.slice(1);
};

toCamelCase() // ''
toCamelCase('SOME_NAME_IVAN') // 'someNameIvan'
toCamelCase('my-super-key') // 'mySuperKey'

/^199\d|20\d{2}|2100$/

.green { background-color: green; }

// использование
- document.body.getNodesByText('fragment').forEach(
-   el => el.style.backgroundColor = '#7f7'
- );
+ const elements = document.body.getNodesByText('fragment');
+ elements[0]?.click();
+ elements.forEach((el) => (el.style.backgroundColor = '#7f7'));

obj.SRLegacyFoods[0].foodNutrients.find((entry) => entry.nutrient.id === 1093)