css transition not working correctly in React, what could be wrong?

Question

React

Can you please tell me why react kills transition animations if the keys of the elements in the array do not change?
At the same time, he does not touch the animation in one direction.
In my example, the animation works out if you press the left button. But on the right button the animation doesn't work as I expect.
Example in sand https://codesandbox.io/embed/flamboyant-kirch-49uc...

Answer 1

It is not clear how to fork there, so here is the corrected code

g-code Dots.jsh

import React, { useMemo } from "react";
import * as S from "./dots.style";

function makeData(dots, shift, width) {
  const normShift = shift >= 0 ? shift : shift - dots.length * shift;
  return dots.map((dot, index) => ({
    key: dot,
    isFirst: index === 0,
    isLast: index === dots.length - 1,
    left: ((normShift + index) % dots.length) * width
  }));
}

export const Dots = ({ dots, shift }) => {
  const data = useMemo(() => makeData(dots, shift, 25), [dots, shift]);

  return (
    <S.Container>
      {data.map(({ key, left, children }) => (
        <S.Dot key={key} left={left}>
          {key}
        </S.Dot>
      ))}
    </S.Container>
  );
};

the problem was here in what: keys for elements were reassigned. Therefore, some elements remained as they were and were simply updated, and some were recreated (react does not know how to transfer some elements over others). Therefore, the key must be saved, but simply change the left for everyone