javascript - How to override <MTableBody /> in drag and drop?

Question

I am trying to implement drag and drop for the material UI table (https://material-table.com/#/docs/features/editable). Below code is working fine but the problem is "div" tag in the below code messing up my table (css). I don't want to give "ref" in the "div" tag instead I want to update in table body.

Kindly help me with the same.

Using "react-beautiful-dnd" for drag and drop.

Body: (props) => (
              
    
    <DragDropContext onDragEnd={onDragEnd}>
                <Droppable droppableId="droppable">
                  {(provided) => (
                     <div ref={provided.innerRef}>
                      <MTableBody {...props}/>
                       {provided.placeholder}
                     </div>
                  )}
                </Droppable>
              </DragDropContext>
              ),

question from:https://stackoverflow.com/questions/66064555/how-to-override-mtablebody-in-drag-and-drop

Answer 1

Waitting for answers