Need help fixing sortable list animations

[ghost]

Hi,

Been trying to recreate this example
https://master--5fc05e08a4a65d0021ae0bf2.chromatic.com/?path=/story/presets-sortable-vertical--removable-items

But when my list changes on drop with the arrayMove helper I have a janky animation where the items jump around. I think this might be because of the rerender when using the setter from react hook. Can anyone help me fix this? Thanks.

Here is a gist of my code
https://gist.github.com/kinvris/be4cb93cff2863615751cc2da413631c

[clauderic]

This is happening because the key you have provided to your SortableItems is not stable. You're currently passing in the index as a key, which causes the components to unmount and re-mount when the order of the list changes. Use the unique id of each item as a key instead, which will remain stable even when the order of the items changes.

-key={index}
+key={id}

[ghost]

You know when you spend so much time looking at something you just can't see it?

Thanks a lot for the help. Works perfectly now.