React项目用react-beautiful-dnd报错：无法找到ID为x的可拖拽元素

基于示例代码修改后，仅调整了每个可拖拽行的内容，尝试拖拽表格行元素时触发报错：Unable to find draggable with id x。

数据 #

questions数据结构如下：

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

UI截图 #

代码 #

<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>

内容的提问来源于stack exchange，提问作者X3R0