Using React Table with React Query and manual pagination, React 19 with compiler

[LaurinBrechter]

Hey, I am trying to use react table together with react query where react query does the fetching and server-side pagination. My Code looks something like this:

const [pagination, setPagination] = useState<{
    pageIndex: number;
    pageSize: number;
  }>({
    pageIndex: 0,
    pageSize: 10,
  });

const { data, isLoading } = useQuery({
    queryKey: [pagination.pageIndex],
    queryFn: () =>
      fetchData(
        pagination.pageIndex * pagination.pageSize,
        pagination.pageSize,
      ),
  });

const table = useReactTable({
      data: data ?? [],
      columns,
      getCoreRowModel: getCoreRowModel(),
      manualPagination: true,
    });

And then I have the typical stuff to render the table and buttons which increment or decrement pagination by using the setter. The problem is, however, that the table always only shows the initial data from the first load. But when I click the buttons to paginate, the query runs, the data changes (correct values when I log) but the data table doesn't show the new values. How can I make the data table refresh with the new values?

It's probably important to point out that I am using react 19 with the compiler (which I guess could cause the issue) and the canary version of nextjs with this config:

experimental: {
    authInterrupts: true,
    dynamicIO: true,
    reactCompiler: true,
    serverActions: {
      bodySizeLimit: "10mb",
    },
  },