How can I pass a specific Column Ref to Table Component and then to React-dnd for each row?

Question

I want to add a dnd functionality to a Table and The table has got SubComponents to render subrows with different headers.

const columns = React.useMemo(
    () => [
      {
        Header: "move & index",
        id: "move",
        Cell: ({ row}) => ( 
          <div ref= {useref}>
              rowindex + 1
          </div>
      },
       {
        Header: "Item Name",
        accessor: "name",
      },
    return (
         < SelectedTable columns={columns} rdata= { data ? data : []}  />
     )

Here is the SelectedTable Component

function SelectedTable({ columns, rdata }) {
 
  const [sdata, setData] = React.useState(mydata)
  const [expanded, setExpanded] = useState("false")
  
  useEffect(()=>{
    setData(rdata)
  },[rdata])
  
  const reorderRow = (draggedRowIndex, targetRowIndex) => {
    sdata.splice(
      targetRowIndex,
      0,
      sdata.splice(draggedRowIndex, 1)[0]
    );
    setData([...sdata]);
  };

   const {

    getTableProps, // All imports are there

    } = useTable(
    {
      columns,
      data : sdata,
      state : {expanded},
      getRowId: row => row.id,
    },

    useFilters, // All other hooks are there
   
  );

 return (
    <DndProvider backend={HTML5Backend}>
    <table>
    // thead is here

   <tbody {...getTableBodyProps()}>
        {rows.map(
            (row, index) =>
               prepareRow(row) || (
                       <DraggableRow key={row.id} row={row} reorderRow={reorderRow} />
                          )
                      )}
                    }}
   </tbody>

     // tfooter here

     </table>
      </DndProvider>

Here is the React-dnd code

const DraggableRow = ({ row, reorderRow }) => {
  const [, dropRef] = useDrop({
  accept: 'row', //itemtype that it will accept
  drop: (draggedRow) => reorderRow(draggedRow.index, row.index),
  //Collecting functions can be put here
  })
  
  const [{ isDragging }, dragRef, previewRef] = useDrag({
  collect: (monitor) => ({
  isDragging: monitor.isDragging(),
  }),
  item: () => row,
  type: 'row',   
  })
  return (
          {row.cells.map((cell) => (
            <td ref={dropRef}>
            <button ref={dragRef} className = "width-50px"></button>
          </td>
)

Now what I want to do is it should take dragref reference from the move column of the table

 {
        Header: "move&index",
        id: "move",
        Cell: ({ row}) => ( 
          <div ref= {useref} >        // I want to pass this ref to react-dnd it can be anything 
              rowindex + 1
          </div>
      },

How can I pass this ref to SelectedTable Component?
How can I access the specific ref data from the Column Recieved and how can I assign it to React-dnd?

I dont want to use to add index in dnd return() that is causing other issues to rowSubComponents I am using react-table v7 and react-dnd latest version with html5 backend Refrence: https://codesandbox.io/s/github/tanstack/table/tree/main/examples/react/row-dnd?from-embed=&file=/src/main.tsx