React query useInfiniteQuery (v3) and react table (v7) for server side pagination

const {
    data: devicesData,
    isFetching,
    fetchNextPage,
    fetchPreviousPage,
    hasNextPage,
    isFetchingNextPage,
    hasPreviousPage,
    isFetchingPreviousPage
  } = useDevices({}, pageNumber, pageSize)

<button onClick={() => gotoPage(0)} disabled={!hasPreviousPage || isFetchingPreviousPage}>
          {'<<'}
        </button>{' '}
        <button
          onClick={() => previousPage()}
          disabled={!hasPreviousPage || isFetchingPreviousPage}
        >
          {'<'}
        </button>{' '}
        <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
          {'>'}
        </button>{' '}
        <button
          onClick={() => gotoPage(pageOptions.length - 1)}
          disabled={!hasNextPage || isFetchingNextPage}
        >
          {'>>'}

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage
    // Get the state from the instance
  } = useTable(
    {
      //@ts-ignore
      columns,

      nextPage: () => setPageNumber(pageNumber + 1),
      previousPage: () => setPageNumber(pageNumber - 1),
      //nextPage: fetchNextPage(),
      //previousPage: fetchPreviousPage(),
      data: devicesByStatus,
      state: {
        pageNumber,
        pageSize
      },
      manualPagination: true // Set to false to let useTable handle pagination
    },
    usePagination
  )