Unable to find draggable with id x – reactjs – react-beautiful-dnd

having this issue with react-beautiful-dnd on my reactjs page.

I’ve gotten my code from here with some minor changes to the content of each "dragable"/"row"

Issue

Update: This issue happens when I try to drag my row

Data

questions is equal to

[
    {
      "id": 499,
      "type": "text",
      "text": "T1",
    },
    {
      "id": 500,
      "type": "text",
      "text": "How are you doing?",
    }
  ]

UI

Code

<TableContainer component={Paper}>
    <Table sx={{ minWidth: 650 }} aria-label="simple table">
        <TableHead>
        <TableRow>
            <TableCell align="left"><strong>Title</strong></TableCell>
            <TableCell align="left"><strong>Question Type</strong></TableCell>
            <TableCell align="left"><strong>Recommend Answer Duration</strong></TableCell>
            <TableCell align="left"><strong>Actions</strong></TableCell>
        </TableRow>
        </TableHead>
        <DragDropContext onDragEnd={onDragEnd}>
            <Droppable droppableId="droppable">
            {(provided, snapshot) => (
                <tbody
                {...provided.droppableProps}
                ref={provided.innerRef}
                >
                <TableRow>
                    <TableCell component="th" scope="row">
                        <button className="questions-add-question-button">+ Add Question</button>
                    </TableCell>
                    <TableCell align="left">-</TableCell>
                    <TableCell align="left">-</TableCell>
                    <TableCell align="left"></TableCell>
                </TableRow>
                {questions.map((question:any, index) => (
                    <Draggable key={question.id.toString()} draggableId={question.id.toString()} index={index}>
                    {(provided, snapshot) => (
                        <TableRow
                            ref={provided.innerRef}
                            {...provided.draggableProps}
                            {...provided.dragHandleProps}>
                            <TableCell component="th" scope="row">
                                {question.text}
                            </TableCell>
                            <TableCell align="left">{question.type}</TableCell>
                            <TableCell align="left">{question.recommend_answer_duration} Second(s)</TableCell>
                            <TableCell align="left">                                        
                                <DropDown
                                    text="Actions"
                                    buttons={
                                        <>
                                            <button>Delete</button>
                                        </>
                                    }
                                />
                            </TableCell>
                        </TableRow>
                    )}
                    </Draggable>
                ))}
                {provided.placeholder}
                </tbody>
            )}
            </Droppable>
        </DragDropContext>
    </Table>
</TableContainer>

Answer

Solution / Fix

All I needed to do was to change the following

1. Change the droppable id to something more unique <Droppable droppableId="question-drag-and-drop">

2. set the draggable id to something more unique <Draggable key={`drag-id-${question.id.toString()}`} draggableId={`drag-id-${question.id.toString()}`} index={index}>

3. I also had to remove the React’s StrictMode