onDragEnd not render update DragOverlay

[locnv2k2]

const handleDragEnd = useCallback(
event => {
const {active, over} = event;

  setTimeout(() => {
    const allItems = document.querySelectorAll('.MageplazaTT-MediaItem__Container');
    allItems.forEach(item => item.classList.remove('Warning__Box'));
    allItems.forEach(item => item.classList.remove('Position__Media'));
  }, 0);
  if (active.id !== over.id) {
    setActiveId(over.id);
    const oldIndex = tempMediaList.findIndex(item => item.mediaId === active.id);
    const newIndex = tempMediaList.findIndex(item => item.mediaId === over.id);
    const activeItem = tempMediaList[oldIndex];
    const overItem = tempMediaList[newIndex];
    if (activeItem.mediaPined === overItem.mediaPined) {
      const dataSort = [
        {
          index: oldIndex,
          timestamp: tempMediaList[oldIndex].timestamp,
          id: tempMediaList[oldIndex].mediaId
        },
        {
          index: newIndex,
          timestamp: tempMediaList[newIndex].timestamp,
          id: tempMediaList[newIndex].mediaId
        }
      ];

      handleAction({
        action: ACTION_REARRAGE,
        data: {dataSort: dataSort}
      });
    } else {
      setTempMediaList(mediaList);
    }
  }
},
[handleAction, tempMediaList]

);

const SortableGallery = ({items, activeId}) => {
return (

<SortableContext items={items.map(item => item.mediaId)} strategy={rectSortingStrategy}>
{items.map((item, index) => (
<SortablePhoto key={item-${index}} index={index} photo={item} />
))}

<div style={{background: 'red'}}>
<DragOverlay
dropAnimation={{
duration: 2000
}}
>
{activeId ? : null}

);
};
my overlay return to its start position after releasing the dragged item. please check it.

[lukasjengo]

See if setting your
<SortablePhoto key={item-${index}} index={index} photo={item} />
component key to a stable (non index based) key helps.

You can try
<SortablePhoto key={item.mediaId} index={index} photo={item} />