Passing a variable to a child component from parent definition

Question

I'm attempting to create a reusable data-table component in react, that mimics the Angular Material UI table definition. I'm coming from an Angular background and have been learning react for a few months struggling parts of it.

In React I'm making use of react-table to assist, I have the table fully generating the headers and the rows, the only issue is the rows aren't rendering off of the definition.

Here is an example of how I want the DataTable to be used:

<DataTable data={configurationData} isLoading={isLoading} error={error} refetch={refetch}>
  <Column accessor="featureId" sortable>
    <th style={{width: '10%', textAlign: 'left'}}>Feature</th>
    <td><div style={{color: 'blue'}}>{value}</div></td>
  </Column>
  <Column accessor="value" sortable>
    <th style={{width: '10%', textAlign: 'left'}}>Feature</th>
    <td><TextField inputRef={value}/></td>
  </Column>
</DataTable>

Here is how I'm generating the data for react-table in the DataTable component, which is then passed into useTable from react-table.

const tableColumns = React.useMemo(
  () =>
    React.Children.map(children, (child) => {
      const header = child.props.children.find((child) => child.type === 'th');
      const cell = child.props.children.find((child) => child.type === 'td');

      return {
        header,
        Cell: ({value}) => React.cloneElement(cell, null, value),
        accessor: child.props.accessor,
        sortable: child.props.sortable,
        exportable: child.props.exportable,
      };
    }),
  [children],
);

const tableInstance = useTable({columns: tableColumns, data: tableData, initialState: {pageIndex: 0}},
    useGlobalFilter,
    useSortBy,
    usePagination,
);

I get the error from the {value} that value doesn't exist, which clearly it doesn't, I think I've gone the wrong way architecting the field with how I can bind the cell.value into td.

So essentially I want the cell.value in the return statement to some how replace the value in the but still render the html in the .

In addition, I tried passing in the value from the Column component but it has no knowledge of the value either and it doesn't seem to be used at all anyways which I haven't figured out yet as to why, but for completelness here is its code:

function Column({accessor, sortable, exportable, children}) {
return {
    Header: () => <>{header}</>,
    accessor,
    Cell: ({cell: {value}}) => children(value),
    sortable: sortable || false,
    exportable: exportable || true,
    exampleData: 'test'
    };
}

Link to full DataTable gist on github: https://gist.github.com/krystian-booker/e0f0475c73bedadae2669054966e5bfb

Thanks for reading.