material-table tableRef.current value remains undefined

Question

I need to filter data on MaterialTable component and get a size of an array with filtered data. I tried using tableRef but the piece of code below always outputs current: undefined. How can I fix this problem

export default function TableComponent({ tableData }) {
  const tableRef = useRef();
  const [rows, setRows] = useState([...tableData]);

  

  return (
        <MaterialTable
        tableRef={tableRef}
        ...
        onFilterChange={(e) => {
          console.log(tableRef);
        }}
        data={tableData}
    />)
}
        

Answer 1

The solution was rather easy, just use ref instead of tableRef like this:

  export default function TableComponent({ tableData }) {
  const tableRef = useRef();

  ...

  return (
        <MaterialTable
        ref={tableRef}
        ...
        onFilterChange={(e) => {
          console.log(tableRef);
        }}
        data={tableData}
    />)
  }