Dnd-kit Multiple containers: items jump disorderly after quick drag and drops

Question

As seen in the attached video clip, I can move the items in container A to B without any problem. But if the speed of my drag increase, the list in the over container starts to behave abnormally. I tried the example multi container story but didn't capture this type of behavior.

Once the list items start to jump all over the place, if click on an item, it immediately switch place with another one, as the argument {over} is now not itself even in dragStart.

Sandbox: https://codesandbox.io/s/eloquent-kirch-t9r13j?file=/Dnd.js

Video: https://user-images.githubusercontent.com/83575213/170879626-de413f22-1236-4128-baec-c95363e61b47.mp4

Really appreciate any helps. Cheers

Answer 1

Apparently it was the issue from the dnd-kit library at version 6.0.6 or lower.

However this issue has been fixed in v6.0.7, you can see the PR here: https://github.com/clauderic/dnd-kit/pull/788

Answer 2

I had the same issue, it was the problem with arrays not updating after drag end. Dnd navigates by keys and it looks like there are more than 1 element with the same key in one array, that's why it is grabbing 2 elements at ones.