Javascript – Tanstack Data Table keeps resetting pagination

I have a table from @tanstack/react-table I want to implement pagination. I’ve the below so far and when I click next page it adds 1 to the pageIndex, but then immediately resets it back to 0.

CODE

"use client";

import { memo, useEffect, useMemo, useState } from "react";

import {
  flexRender,
  getCoreRowModel,
  getPaginationRowModel,
  useReactTable,
} from "@tanstack/react-table";

import {
  Table,
  TableBody,
  TableCell,
  TableHead,
  TableHeader,
  TableRow,
} from "@/components/ui/table";

import PaginationFooter from "./pagination-footer";

import { createClient } from "@/utils/supabase/client";

function DataTable({ columns }) {
  const [mounted, setMounted] = useState(false);
  const [data, setData] = useState([]);
  const [count, setCount] = useState(0);
  const [rowSelection, setRowSelection] = useState({});
  const [pagination, setPagination] = useState({
    pageIndex: 0,
    pageSize: 15,
  });

  const table = useReactTable({
    data,
    columns,
    getCoreRowModel: getCoreRowModel(),
    onRowSelectionChange: setRowSelection,
    pageCount: Math.ceil(count / pagination.pageSize),
    onPaginationChange: setPagination,
    getPaginationRowModel: getPaginationRowModel(),
    state: {
      rowSelection,
      pagination,
    },
  });

  const supabase = createClient();

  useEffect(() => {
    setMounted(true);
  }, []);

  useEffect(() => {
    async function fetchData() {
      const from = pagination.pageIndex * pagination.pageSize;
      const { data, count, error } = await supabase
        .from("contacts")
        .select("*", { count: "exact" })
        .order("created_at", { ascending: false })
        .range(from, from + pagination.pageSize - 1);

      if (error) {
        return;
      } else {
        setCount(count);
        setData(data);
      }
    }
    fetchData();
  }, [pagination.pageIndex]);

  useEffect(() => {
    const selectedRows = table.getSelectedRowModel().rows.map((row) => row.original);
    console.log(selectedRows);
  }, [rowSelection]);

  if (!mounted) return null;

  return (
    <div className="h-full flex flex-col flex-1 overflow-x-auto">
      <div className="flex-grow overflow-x-auto min-h-0">
        {...table}
      </div>
      <div className="select-none bg-background">
        <PaginationFooter table={table} />
      </div>
    </div>
  );
}

export default memo(DataTable);