react dnd-kit sortable : why is the first element of my sortable not draggable?

Question

I am trying to build a very basic sortable using react dnd-kit, and everything works, except one thing : the first element of my sortable array doesn't move when it is dragged (it moves when other elements are dragged on it, which makes this even weirder).

Here is the CodeSandBox with the project : https://codesandbox.io/s/condescending-wright-scyqvo?file=/src/components/Item.js

Hope someone can help me, thanks a lot :)

Answer 1

Ok I solved it, but I'll leave it here just in case it can be useful to someone else.

The id given to the useSortable hook cannot be 0, and therefore the ids of the list should begin at 1.

Answer 2

It's already solved but I don't see the solution I came up with. So when passing the ID to useSortable hook you can surround it with backticks like so:

const { attributes, listeners, setNodeRef, transform } = useDraggable({
  id: `${your_id}`,
});