Testing component containing react-table fails

Question

I wrote a unit test for Filter component that uses some properties from useTable hooks in react-table. Hence, I need to invoke useTable hook in the test suit. However, I face an error. What I am doing wrong that is causing this error?

  ● Test suite failed to run

    TypeError: Cannot read properties of null (reading 'useRef')

      46 | ];
      47 |
    > 48 | const { preGlobalFilteredRows, setGlobalFilter, globalFilter } = useTable(
         |                                                                          ^
      49 |   { columns: columns as Column[], data },
      50 |   useFilters,
      51 |   useGlobalFilter,

Test file: Filter.test.tsx:

import { Filter } from "../components/Filter";
import { render, screen } from "@testing-library/react";
import {
  useTable,
  Column,
  useGlobalFilter,
  useFilters,
  Hooks,
} from "react-table";

const data = [
  {
    title: "phonex",
    price: 120,
    id: 1,
    category: "phone",
  },
  {
    title: "honda",
    price: 12000,
    id: 2,
    category: "vehicle",
  },
  {
    title: "Arduino",
    price: 50,
    id: 3,
    category: "hardware",
  },
];

// get data columns
const columns = Object.keys(data[0]).map((key) => {
  return { Header: key, accessor: key };
});

const tableHooks = (hooks: Hooks) => {
  hooks.visibleColumns.push((columns) => [...columns]);
};

const { preGlobalFilteredRows, setGlobalFilter, globalFilter } = useTable(
  { columns: columns as Column[], data },
  useFilters,
  useGlobalFilter,
  tableHooks
);

test("renders learn react link", () => {
  const { getByText } = render(
    <Filter
      globalFilter={globalFilter}
      preGlobalFilteredRows={preGlobalFilteredRows}
      setGlobalFilter={setGlobalFilter}
    />
  );

  const inputElement = getByText("input");
  expect(inputElement).toBeInTheDocument();
});

Filter component: In this component, some of the properties from the useTable hook are used.

import { useState } from "react";
import { Row, useAsyncDebounce } from "react-table";
import tw from "twin.macro";
import { FilterProps } from "../types";

const StyledFilter = tw.input`
   p-3 
   rounded-full
   border-primary 
   focus:border-2
   border-[1px]
   outline-none
   w-full
   md:w-2/5
   mx-auto 
   my-2
   text-center
`;

export const Filter = ({
  preGlobalFilteredRows,
  setGlobalFilter,
  globalFilter,
}: FilterProps) => {
  const [value, setValue] = useState(globalFilter);
  const count = preGlobalFilteredRows.length;

  const onChange = useAsyncDebounce(
    (value) => setGlobalFilter(value || undefined),
    200
  );

  return (
    <StyledFilter
      placeholder={`${count} items`}
      onChange={(e) => {
        setValue(e.target.value);
        onChange(e.target.value);
      }}
      value={value || ""}
    />
  );
};