Animating react list dragging items

const App = () => {
  const [myArray, setMyArray] = React.useState([
    0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
  ]);
  const [draggedKey, setDraggedKey] = React.useState(null);
  const [pendingNewKey, setPendingNewKey] = React.useState(null);
  const elRef = React.useRef({});
  const keyInAnimation = React.useRef(null);
  const prevPos = React.useRef({});

  // 👇 Attempt to debounce update of array
  React.useEffect(() => {
    if (
      pendingNewKey === null ||
      draggedKey === null ||
      draggedKey === pendingNewKey ||
      keyInAnimation.current === draggedKey
    )
      return;
    const updateArray = () => {
      setMyArray((prev) => {
        const prevIndex = prev.findIndex((x) => x === draggedKey);
        const newIndex = prev.findIndex((x) => x === pendingNewKey);
        const newArray = [...prev];
        newArray[prevIndex] = pendingNewKey;
        newArray[newIndex] = draggedKey;
        return newArray;
      });
    };
    const debouncedUpdate = setTimeout(updateArray, 100);
    return () => clearTimeout(debouncedUpdate);
  }, [pendingNewKey, draggedKey]);

  React.useLayoutEffect(() => {
    Object.entries(elRef.current).forEach(([key, el]) => {
      if (!el) return;

      // 👇 Get difference in position to calculate an offset for transition
      const { top } = el.getBoundingClientRect();
      if (!prevPos.current[key] && prevPos.current[key] !== 0)
        prevPos.current[key] = top;
      const diffTop = Math.floor(prevPos.current[key] - top);
      if (diffTop === 0 || Math.abs(diffTop) < 30) return;
      prevPos.current[key] = top;
      el.style.transform = `translateY(${diffTop}px)`;
      el.style.transition = 'scale 0.3s ease-in-out, transform 0s';

      // 👇 First frame renders offset positions, second the transition ends
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          if (!el) return;
          el.style.transform = `translateY(0px)`;
          el.style.transition =
            'scale 0.3s ease-in-out, transform 100ms ease-out';
        });
      });
    });
  }, [myArray.toString()]);

  const onDragStart = (e, key) => {
    keyInAnimation.current = key;
    setDraggedKey(key);
    const emptyDiv = document.createElement('div');
    emptyDiv.style.width = '0px';
    emptyDiv.style.height = '0px';
    e.dataTransfer.setDragImage(emptyDiv, 0, 0);
    e.currentTarget.className = 'draggable';
  };

  const onMouseDown = (e) => {
    e.currentTarget.className = 'draggable';
  };
  const onMouseUp = (e) => {
    e.currentTarget.className = 'listItem';
  };

  const onDragOver = (e, key) => {
    e.preventDefault();
    if (draggedKey === null) return;
    if (draggedKey === key) {
      keyInAnimation.current = key;
      setPendingNewKey(null);
      return;
    }
    if (keyInAnimation.current === key) {
      return;
    }
    keyInAnimation.current = key;
    setPendingNewKey(key);
    // 👇 Attempt to reduce motion error but could be unnecessary
    Object.values(elRef.current).forEach((el) => {
      if (!el) return;
      el.style.transform = `translateY(0px)`;
      el.style.transition = 'scale 0.3s ease-in-out, transform 0s';
    });
  };

  const onDragEnd = (e) => {
    setDraggedKey(null);
    setPendingNewKey(null);
    keyInAnimation.current = null;
    e.target.className = 'listItem';
  };

  return (
    <div className="App">
      {myArray.map((x) => (
        <div
          className="listItem"
          draggable
          key={x}
          onDragStart={(e) => onDragStart(e, x)}
          onDragOver={(e) => onDragOver(e, x)}
          onDragEnd={onDragEnd}
          onMouseDown={onMouseDown}
          onMouseUp={onMouseUp}
          ref={(el) => (elRef.current[x] = el)}
        >
          <h3>hello - {x}</h3>
        </div>
      ))}
    </div>
  );
};

ReactDOM.render(<App />, document.querySelector("#root"));

.App {
  text-align: center;
  align-items: center;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  gap: 15px;
}
.listItem {
  border: 2px solid black;
  margin: 5px;
  width: 400px;
  cursor: grab;
  z-index: 1;
  transition: scale 0.3s ease-in-out;
  background-color: white;
}

.draggable {
  border: 2px solid hotpink;
  margin: 5px;
  width: 400px;
  cursor: grab;
  scale: 108%;
  z-index: 10;
  transition: scale 0.3s ease-in-out;
  background-color: white;
}

.listItem:-moz-drag-over {
  cursor: pointer;
}

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.production.min.js"></script>