wrap gridjs component in a DragDropContext using react-beautiful-dnd

Question

I am not a react expert, and I am trying to integrate a gridjs component with react-beautiful-dnd library. The objective is to add drag and drop functionaly to a gridjs table.

I have create a react component, that looks like this:

import {DragDropContext, Draggable, Droppable} from "react-beautiful-dnd";

function ForwardGrid({userdata}, ref) {
    const users = userdata.data;
    return (<>
        <div ref={ref}>
            <DragDropContext>
                <table>
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Username</th>
                        <th>Age</th>
                        <th>Gender</th>
                    </tr>
                    </thead>
                    <Droppable droppableId="droppable-1">
                        {(provider) => (
                            <tbody
                                className="text-capitalize"
                                ref={provider.innerRef}
                                {...provider.droppableProps}
                            >
                            {users?.map((user, index) => (
                                <Draggable
                                    key={user.name}
                                    draggableId={user.name}
                                    index={index}
                                >
                                    {(provider) => (
                                        <tr {...provider.draggableProps} ref={provider.innerRef}>
                                            <td {...provider.dragHandleProps}> =</td>
                                            <td>{user.name}</td>
                                            <td>{user.age}</td>
                                            <td>{user.gender}</td>
                                        </tr>
                                    )}
                                </Draggable>
                            ))}
                            {/*{provider.placeholder}*/}
                            </tbody>
                        )}
                    </Droppable>
                </table>
        
            </DragDropContext>
        </div>
    </>)

}

const forwardTable = React.forwardRef(ForwardGrid);
export default forwardTable;

this component return a forwardref, which is used in a parent component.

const tableRef = useRef(null);
const wrapperRef = useRef(null);
const [users, setUsers] = useState(userdata.data);

useEffect(() => {
    console.log(tableRef.current)
    const grid = new Grid({
        from: tableRef.current,
    }).render(wrapperRef.current);
}, []);

return (
    <>
        <div className="App mt-4">
            <ForwardGrid ref={tableRef} userdata={userdata}/>
            <div ref={wrapperRef}/>
        </div>
    </>
);

However, once .render(wrapperRef.current) is fired, the table is rendered but the drag and drop doesn't work. I have inspected the html generated and I have noticed that it is not correct. It does not contain all the attributes that react-beautiful-dnd would generate normally (for instance data-rbd-draggable-id, data-rbd-draggable-context-id etc).The drag and drop functionalty works fine with a normal html table.

I would expect this html generated.

<tr data-rbd-draggable-context-id="0" data-rbd-draggable-id="Subham" style="">
        <td tabindex="0" role="button" aria-describedby="rbd-hidden-text-0-hidden-text-0"
            data-rbd-drag-handle-draggable-id="Subham" data-rbd-drag-handle-context-id="0" draggable="false"> =
        </td>
        <td>Subham</td>
        <td>21</td>
        <td>male</td>
    </tr>

insted it returns this.

  <tr class="gridjs-tr">
                        <td data-column-id="#" class="gridjs-td">=</td>
                        <td data-column-id="username" class="gridjs-td">Jeevan</td>
                        <td data-column-id="age" class="gridjs-td">21</td>
                        <td data-column-id="gender" class="gridjs-td">male</td>
                    </tr>

any idea how can I solve the problem?