I'm using Material-Table in a React app. I enabled filtering, and after, I used Material-Table's filterComponent.

I have problems with retrieving the value from Column1FilterComponent custom component or pass down a function which can trigger a state change, and after it could trigger a fetch. I placed my setFetchState(...) function to the point I'd like it to be. Here is an example: https://codesandbox.io/s/material-table-playground-forked-simple-q05vhf

Here are my questions: How to get value from a filterComponent? How to pass a function to filterComponent?

export function SomethingTable(props) {
  const { fetchState, setFetchState } = props;
  const [randomData, setRandomData] = useState([
    { filename: "1", another: "two" },
    { filename: "2", another: "three" },
    { filename: "3", another: "four" },
    { filename: "4", another: "five" },
    { filename: "5", another: "six"
    }
  ]);

  return (
    <MaterialTable
      title="Something"
      columns={[
        {
          title: "Column1",
          field: "filename",
          type: "numeric",
          width: "10%",
          filterComponent: (props) => <Column1FilterComponent {...props} />
        },
        { title: "Column2", field: "another" }
      ]}
      data={randomData}
      /*onFilterChange={(filters) => {
          console.log("filters", filters);
        }}*/
      options={{
        filtering: true
      }}
    />
  );
}

function Column1FilterComponent(props) {
  const [value, setValue] = useState("");
  return (
    <TextField
      id="area-text"
      value={value}
      onChange={(event) => {
        setValue(event.target.value);
        //My set function:
        // setFetchState(event.target.value);
        props.onFilterChanged(props.columnDef.tableData.id, event.target.value);
      }}
    />
  );
}