Why DragAndDrop does only work with the last added Button?

Question

I am struggeling with Drag and Drop in a react Component. I want to drag and drop different buttons in my App.

Therefore I created a Hook like:

const [{isDragging}, drag] = useDrag(() => ({
    type: 'button',
    collect: monitor => ({
      isDragging: !!monitor.isDragging(),
    }),
  }))

Then later in the return construct, I use this as a ref:

{articleList.map((item, idx) => {
        return(
          <Accordion expanded={isElementExpanded(item.id)} onToggle={handleToggle2(item.id)} id={item.id} size="S">
            ...
                    {item.Blocks.map((block, index) => {
                      return(
...
                          <Button id={'button-'+index} ref={drag} ...></Button>...

The Problem is, that only one Button, the last added, is draggable. The others own an attribute with draggable = "false". It is strange because I render all Buttons with ref={drag}.

Where is my error?

thank, Sven