drag and drop library dnd-kit not working in my React example

I've been trying to implement a drag and drop library called dnd-kit for React.

I been working on a very basic example with help of the guide for sorting list with overlay but it doesn't work and i can't tell what am i doing wrong.

Here is the Sandbox Code

The animation is not properly working and if I interact with the first row, it freezes and stop working at all.

Any help please?

After playing with it for some time and some input from the author I got it working a bit better and found the the component DragOverlay is causing the problem which I can't solve just yet.

If DragOverlay is deleted or moved outside the DndContext, it sorts just fine but without the overlay effect.

The issue is casued by the id 0. Basically the id that you pass to the useSortable hook has to a be a string (or truthy)

I changed the ids from number to string and it started working. I also forked and updated your Sandbox Code