Error Reading Data from Supabase into React-Table with the help of React-Query [TypeError: Cannot read properties of undefined (reading 'forEach')]

Question

I'm trying to read data from supabase into react-table, with the help of react-query. Have been trying to figure this out for a week not but not able to.

The useReadData.ts Hook

export default function useReadData(table_name, startRow, endRow, fetchIdRef) {
  const fetchId = ++fetchIdRef.current;
  return useQuery(["read_data"], () => {
    // I don't know the source of fetchId, maybe you can pass it in the hook too?
    if (startRow && endRow && fetchId === fetchIdRef.current)
      return supabase
        .from(table_name)
        .select("*")
        .range(startRow, endRow)
        .then(handleSupabaseError)
        .then(({ data }) => data);

    // To avoid returning Promise<void>. You can handle this in the useEffect as well
    return Promise.resolve([]);
  });
}

In the App.tsx file:

  const [rowData, setRowData] = React.useState([]);
  const [loading, setLoading] = React.useState(false);
  const [pageCount, setPageCount] = React.useState(0);
  const [range, setRange] = React.useState<Range>();

  const fetchIdRef = React.useRef(0);

  const fetchData = React.useCallback(({ pageSize, pageIndex }) => {
    const startRow = pageSize * pageIndex;
    const endRow = startRow + pageSize;
    // setPageDetails({ startRow, endRow });
  }, []);

  const { data } = useReadData(
    "company",
    range?.startRow,
    range?.endRow,
    fetchIdRef
  );

  useEffect(() => {
    setRowData(data);
    setPageCount(10);
    setLoading(false);
  }, [data]);

When I try to run this, I get the error:

TypeError: Cannot read properties of undefined (reading 'forEach')

  83 |   },
  84 | } = useTable(
> 85 |   {
     |  ^
  86 |     columns,
  87 |     data,
  88 |     initialState: {