Переупорядочивание элементов реакции с ключом приводит к переходу css к сбою

Question

У меня есть массив из 2 элементов с абсолютной позицией, которые размещаются с помощью свойства CSS. Кроме того, есть CSS-переход, привязанный к topключ. Когда я меняю позиции элементов, некоторые элементы (хотя ключ не меняется), элемент html воссоздается, поэтому переход CSS не происходит.

      import { useEffect, useState } from "react";
import "./styles.css";

const Square = ({ backgroundColor, index }) => {
  return (
    <div className="square" style={{ backgroundColor, top: index * 100 }} />
  );
};

export default function App() {
  const [arr, setArr] = useState(["blue", "red"]);
  useEffect(() => {
    setTimeout(() => {
      setArr(["red", "blue"]);
    }, 2000);
  }, []);
  return (
    <div className="App">
      {arr.map((backgroundColor, index) => (
        <Square
          index={index}
          backgroundColor={backgroundColor}
          key={backgroundColor}
        />
      ))}
    </div>
  );
}

      .App {
  font-family: sans-serif;
  text-align: center;
  position: relative;
}

.square {
  transition: top 0.5s ease-out;
  width: 100px;
  height: 100px;
  position: absolute;
}

Я создал пример codesandbox проблемы: https://codesandbox.io/s/strange-framework-t2rq9