Implement server side pagination with react table v7 and react query v3

[FACorreiaa]

I know this doesnt fit here but im entering desperation mode with the behavior im having.
Im trying to implement server side pagination using react query at v3 and react table at v7. Im trying some things and created a custom paginator because I want not seeing the virtual paginator from the table but now when I change the custom made paginator, the other appears and it seems I created a paginator inside a paginator..

In react-query v3 I used useInfiniteQuery to fetch the limit and offset:

const useDevices = <T = Device[]>(
  options?: UseQueryOptions<QueryResult, AxiosError, T>,
  page?: number,
  pageSize?: number
) => {
  const queryClient = useQueryClient()
  return useInfiniteQuery(
    ['devices', page, pageSize],
    async ({ pageParam = 1 }) => {
      const offset = (pageParam - 1) * pageSize
      console.log('offset', offset)
      queryClient.cancelQueries('device')
      const { data } = await Axios.get<Device[]>(`devices?limit=${pageSize}&offset=${offset}`)
      return { data, pageParam: pageParam + 1 }
    },
    {
      getNextPageParam: lastPage => lastPage.pageParam || 1,
      getPreviousPageParam: firstPage =>
        firstPage.pageParam && firstPage.pageParam > 1 ? firstPage.pageParam - 1 : 1,
      keepPreviousData: true,
      refetchOnWindowFocus: false,
      staleTime: Infinity,
      ...options
    }
  )
}

On my component I call the hook:

  const [pageNumber, setPageNumber] = useState(0)
  const [pageSize, setPageSize] = useState(40)
  const {
    data: devicesData,
    isFetching,
    fetchNextPage,
    fetchPreviousPage,
    hasNextPage,
    isFetchingNextPage,
    hasPreviousPage,
    isFetchingPreviousPage,
    isFetched
  } = useDevices({}, pageNumber, pageSize)

And on page load I get:

pages
: 
Array(1)
0
: 
data
: 
(40) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
pageParam
: 
2

If I change page on my custom paginator, the fields change to:

devicesData 
{pages: Array(2), pageParams: Array(2)}
pageParams
: 
Array(2)
0
: 
undefined
1
: 
2
length
: 
2
[[Prototype]]
: 
Array(0)
pages
: 
Array(2)
0
: 
data
: 
(40) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
pageParam
: 
2
[[Prototype]]
: 
Object
1
: 
data
: 
(40) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
pageParam
: 
3

And the paginator built from react-table appears.
Rest of relevant code:

  const devicesByStatus = React.useMemo(() => {
    if (!devicesData) return []

    return devicesData.pages.flatMap(page =>
      page.data
        .map(d => ({
          ...d,
          groupsName: d.groups.map(deviceGroup => groupsData?.[deviceGroup.group]?.name || ''),
          deviceType: typesData?.[d.type]
        }))

        .filter(d => {
          switch (deviceStatus) {
            case 'active':
            case 'imported':
              return d.status === deviceStatus
            case 'blocked':
              return d.status === deviceStatus && !d.deviceType?.is_otap
            case 'archived':
              return d.status === 'blocked' && d.deviceType?.is_otap
            default:
              return false
          }
        })
    )
  }, [devicesData, deviceStatus, typesData, groupsData])

Inside the table I have a tab wi device status.
Call my table:

  const {
    getTableProps,
    getTableBodyProps,
    headerGroups,
    prepareRow,
    page,
    canPreviousPage,
    canNextPage,
    pageOptions,
    pageCount,
    gotoPage,
    nextPage,
    previousPage
  } = useTable(
    {
      //@ts-ignore
      columns,
      getRowId,
      nextPage: () => setPageNumber(pageNumber + 1),
      previousPage: () => setPageNumber(pageNumber - 1),
      //nextPage: fetchNextPage(),
      //previousPage: fetchPreviousPage(),
      data: devicesByStatus,
      pageCount: Math.ceil(devicesByStatus.length / pageSize),
      state: {
        pageNumber,
        pageSize
      },
      manualPagination: true,
      autoResetPage: false
    },
    usePagination
  )

And the table with the hand made paginator (not supposed to be used):

<Table
          {...getTableProps()}
          defaultSort={{
            persistKey: `table:device:${deviceStatus}`,
            columns: [{ id: 'name', desc: false }]
          }}
          globalFilter={globalFilter}
          columns={columns}
          data={devicesByStatus}
          plugins={[useGlobalFilter, useSortBy, usePagination, useSingleSelect]}
          options={{
            autoResetGlobalFilter: false,
            getRowId,
            globalFilter: globalFilterFn,
            disableSortRemove: true,
            autoResetSortBy: false,
            useControlledState: state =>
              React.useMemo(() => ({ ...state, selectedRowId: deviceSelected }), [
                state,
                deviceSelected
              ]),
            stateReducer: (state, action) => {
              if (action.type === 'rowSelected') {
                setParams({ drawer: 'device', id: action.id })
              }
              return state
            }
          }}
        />
      )}
      <div>
        <span>
          Page{' '}
          <strong>
            {pageNumber + 1} of {pageOptions.length}
          </strong>{' '}
        </span>
        <button onClick={() => gotoPage(0)} disabled={!hasPreviousPage || isFetchingPreviousPage}>
          {'<<'}
        </button>{' '}
        <button
          onClick={() => fetchPreviousPage()}
          disabled={!hasPreviousPage || isFetchingPreviousPage}
        >
          {'<'}
        </button>{' '}
        <button onClick={() => fetchNextPage()} disabled={!hasNextPage || isFetchingNextPage}>
          {'>'}
        </button>{' '}
        <button
          onClick={() => gotoPage(pageOptions.length - 1)}
          disabled={!hasNextPage || isFetchingNextPage}
        >
          {'>>'}
        </button>{' '}

The custom buttons I created just for testing but they are part of the bug. The built in paginator only shows when I change the state on the manual. So on the first page I dont actually see the builtin paginator. It seems im creating a pagination inside a pagination at this point
Anyone had any idea of what I am missing and what could be causing this weird behavior of having a pagination inside a pagination?

Another thing I tried was having an useEffect but this ends up making calls and see the built in paginator growing on pages (correctly, but not what we want)
// React.useEffect(() => {
// const data = devicesData?.pages
// console.log('datadatadatadata', data)
// if (hasNextPage) {
// fetchNextPage()
// }
// }, [hasNextPage, fetchNextPage])

I think i probably must change my useInfiniteQuery but at this point im a bit lost ngl.