Reordering keyed react elements makes css transition to glitch

Question

I have an array of 2 elements with position absolute, those are layouted via top CSS property. Also, there's a CSS transition hooked to the top key. When I exchange elements positions, some elements (although the key doesn't change), the html element is recreated, hence CSS transition doesn't happen.

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;
}

I've created codesandbox example of the issue: https://codesandbox.io/s/strange-framework-t2rq9