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

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?