Как сделать принудительную перерисовку списка?

Question

Gosttlt @Gosttlt

React

Как сделать принудительную перерисовку списка?

//background: red; - для наглядности
Демонстрация самой проблемы https://drive.google.com/file/d/1sru0Nxdr_jRfTMiZi...
или https://vk.com/video502185518_456239018?list=ln-by...

>update<
Сам код. -Обратите внимание, что есть много стороннего кода, так как компонент разрабатывается не только для горизонтали, но и вертикали и вложенных колонок. Так же код сырой постоянно переписывается по этому не такой "чистый".
>/update<

Как сделать поведение при переносе элемента из начала в конец таким, как когда я переношу элемент из конца в начало?

Немного деталей и рассуждений:

Есть массив

const arr = [
  {
    id: "cm0mpet8k0001jxq8albsrcsi",
    name: "Last",
    order: 0,
    __typename: "TaskCategory",
  },
  {
    id: "cm09amfkn000a6fn446tl8mdb",
    name: "Дом",
    order: 1,
    __typename: "TaskCategory",
  },
  {
    id: "cm07udxi3000513evtfpctrtg",
    name: "Фичи",
    order: 2,
    __typename: "TaskCategory",
  },
  {
    id: "cm07udvin000413evpjlxiec4",
    name: "Баги",
    order: 3,
    __typename: "TaskCategory",
  },
];

И при дропе элемента, я меняю ордеры местами и сортирую. Соответственно меняются местами элементы в массиве.

Что происходит, eсли элемент переносить в конец:

Происходит полная перерисовка DOM перетаскиваемого элемента, что сбрасывает анимацию transition,transform:scale
Элементы которые остались позади не разрушают DOM и продолжая анимацию начинают возвращаться назад, но так как перед ними появился новый DOM-элемент происходит смещение влево и выгладит как скачок.

Что происходит, eсли элемент переносить в начало:

Перетаскиваемый элемент перерисовывается без разрушения DOM и плавно появляется в нужном месте продолжая анимацию
Элементы что остались впереди разрушают DOM и появляются по новой сбрасывая анимацию и остаются на том месте которое мне нужно.

Собственно вопросы:

Почему React разрушает DOM-элементы у которых key остается стабильным. И делает он это только в том случае, если дом элемент переместился из конца в начало списка.
Почему во втором пункте элементы, что остались спереди перетаскиваемого элемента при дропе сбрасывают анимацию и перерисовываются именно в тот момент, когда перетаскиваемый элемент появился перед ними в DOM не происходит не каких рывков при сбросе стиля, все плавно происходит и одновременно DOM перетаскиваемого элемента монтируется в начало списка и в этот же момент стили сбрасываются у спереди стоящих элементов эти 2 перерисовки как-то группируются в 1 рефлоу. Я пытался добиться такого же эффекта, но у меня не получалось сгруппировать эти 2 перерисовки путем сбрасывания transition в момент дропа получается рывок.