How to add a drag and drop property to mui table that has also expanded rows(like tree). How to do drag and drop only inside the same level items?

Question

I want to create a draggable mui table with the help of the react-beautiful-dnd. But there is no examples with datas that are like tree. Only one level examples are there over the internet. Can you explain or give a sandbox code example?

I tried to do that with the help of TableBody(MUI), TableRow(MUI), TableCell(MUI), DragDropContext(beautiful-dnd) , Droppable(beautiful-dnd) , Draggable(beautiful-dnd). onDragEnd={(result) => { handleEndDrag && result.destination && handleEndDrag(result.destination?.droppableId, result.draggableId); The result values doesnt come truely. Always the result.destination?.droppableId comes one after or one behind.