Glitchy animation when dropping item

Hi, I am experiencing a weird animation when sorting a list of elements. I cannot provide the exact codebase, but I have built it on top of the story presets > sortable > multiple containers > many items.

Here below you can see a video of the problem. Notice how the<DragOverlay /> falls correctly into place, while the remaining elements shifts up in a weird way.

https://user-images.githubusercontent.com/12138301/170713994-dcf7dbbc-0bea-4e37-b107-e7b51cef15a2.mov

I have spent quite some time trying to track down the problem, but with no result so far. Anybody has idea of what could be the cause?

Thanks.

[clauderic]

@MTxx87 the problem in your case is that you are not using a stable key property. You are passing the index as the key property to your list items, which causes them to unmount and re-mount when the order of the list changes.

Use the unique id property of your items instead as the key:

https://codesandbox.io/s/rough-cookies-53w0rj?file=/src/Items.tsx

You can read more about using stable keys here:

https://reactjs.org/docs/lists-and-keys.html#keys

[MTxx87]

@clauderic It worked when adding the proper key. Thank you!