Material React Table simple filtering not working Cannot read properties of null (reading 'value')

Hello we've been using Material React Table npm package for showing data, but filtering isn't working, so every time I type a letter this error pops out

Uncaught TypeError: Cannot read properties of null (reading 'value') at MRT_FilterTextField.tsx:119:1 at later (debounce.js:7:1)

This is the code

const columns = useMemo(
    () => [
      {
        header: `${t("login_title_email")}`,
        accessorFn: (row) => row.log_email_address,
        enableClickToCopy: true,
        filterVariant: "text", // default
      },
      {
        header: `${t("login_title_ip")}`,
        accessorKey: "login_attempt_ip",
        enableClickToCopy: true,
      },
      {
        header: `${t("login_title_date")}`,
        accessorFn: (row) => new Date(row.log_date),
        filterFn: "greaterThanOrEqualTo",
        sortingFn: "datetime",
        id: "log_date",
        Cell: ({ cell }) => cell.getValue()?.toLocaleDateString(),
        Filter: ({ column }) => (
          <LocalizationProvider dateAdapter={AdapterDayjs}>
            <DatePicker
              onChange={(newValue) => {
                column.setFilterValue(newValue);
              }}
              slotProps={{
                textField: {
                  sx: { minWidth: "120px" },
                  variant: "standard",
                },
              }}
              value={column.getFilterValue()}
            />
          </LocalizationProvider>
        ),
      },
      {
        header: `${t("login_type")}`,
        accessorKey: "log_type",
      },
    ],
    []
  );
 <MaterialTable
            data={logs}
            columns={columns}
            enableColumnOrdering
            enableGrouping
            enablePinning
            enableRowNumbers
            initialState={{
              density: "compact",
              showGlobalFilter: true,
              showColumnFilters: true,
            }}
          />

Data structure is like this:

const data = [
{log_date: "2023-06-02T04:01:43.665Z"
log_email_address: "test@gmail.com"
log_type: "login_email"
login_attempt_ip: 
"10.10.16.10"
user_id: "12334444"}
]

I would appreciate any kind of help to solve the issue :D Thank you

The issue was in React version, project has been using React version 17 and React-dom version 16. Apparently event and value inside onChange was always null that is why it was throwing error.

The SyntheticEvent is pooled. This means that the SyntheticEvent
object will be reused and all properties will be nullified after the
event callback has been invoked. This is for performance reasons. As
such, you cannot access the event in an asynchronous way.

More about this event issue here

After I upgraded to version

 "react": "^18.2.0",   
 "react-dom": "^18.2.0",

issue was solved.