Clicking one draggable selects them all

[joshbedo]

Super confused I have a pretty basic example below but for some reason when you select one draggable in a list they are all selected. Can't really figure out why its mapping the draggable wrong. Looking at dragStart and other events its not selecting anything besides the last item and the tabindex is 0 for everything in the list.

App.tsx

        {answerChoices.length ? (
          answerChoices.map((answer) => (
            <Draggable key={answer?.id} id={answer?.id} index={answer?.index}>
              <Button>{answer?.text}</Button>
            </Draggable>
          ))
        ) : (
          <div>loading</div>
        )}

Draggable.tsx

import React, { PropsWithChildren } from 'react';
import { useDraggable } from '@dnd-kit/core';

type DraggableProps = PropsWithChildren<{ id: string; }>;

function Draggable({ id, children }: DraggableProps) {
  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
    id: 'draggable',
    data: {
      id,
    }
  });

  const style = transform ? {
    opacity: isDragging ? 0.5 : undefined,
    // transform: `translate3d(${transform.x}px, ${transform.y}px, 0)`,
  } : undefined;

  return (
    <div style={style} ref={setNodeRef} {...attributes} {...listeners}>
      {children}
    </div>
  );
}

export default Draggable;

[joshbedo]

Figured it out, for useDraggable i had to update the id from a generic "draggable" id to incorporate the id

  const { attributes, listeners, setNodeRef, transform, isDragging } = useDraggable({
    id: `draggable-${id}`,
    data: {
      id,
    }
  });