Getting row data in Tankstack Table V8

Question

I'm using Tankstack-react Table V8 in y react project. The table is rendering fine with server side pagination. In each row, there is a edit icon. When the user clicks the edit icon, the edit modal is opened and the selected row's data should be filled in the input fields of the form. Here, I'm getting the data correctly with the 1st page. When I go to the second page of the table and cilcks the edit button. I'm getting the previous page's data in my form instead of the clicked row.

This is how my colums looks like and in the last item action only I'm trying to get the data,

export const columns: ColumnDef<any>[] = [
  {
    accessorKey: "businessShortName",
    header: ({ column }) => {
      return (
        <p
          className="flex items-center cursor-pointer font-semibold"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Lender Business Short Name
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </p>
      );
    },
    cell: ({ row }) => <CellActionToLender data={row.original} />,
  },
  {
    accessorKey: "id",
    header: ({ column }) => {
      return (
        <p
          className="flex items-center cursor-pointer font-semibold"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Fund ID
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </p>
      );
    },
    cell: ({ row }) => <CellActionToFunds data={row.original} />,
  },
  {
    accessorKey: "loanName",
    header: ({ column }) => {
      return (
        <p
          className="flex items-center cursor-pointer font-semibold"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Fund Name
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </p>
      );
    },
  },
  {
    accessorKey: "emiAmount",
    header: ({ column }) => {
      return (
        <p
          className="flex items-center cursor-pointer font-semibold"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          EMI Amount
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </p>
      );
    },
  },
  {
    accessorKey: "outstandingAmount",
    header: ({ column }) => {
      return (
        <p
          className="flex items-center cursor-pointer font-semibold"
          onClick={() => column.toggleSorting(column.getIsSorted() === "asc")}
        >
          Fund Outstanding
          <ArrowUpDown className="ml-2 h-4 w-4" />
        </p>
      );
    },
  },
  {
    id: "actions",
    header: ({ column }) => {
      return <p className="flex items-center font-semibold">Actions</p>;
    },
    cell: ({ row }) => <CellAction data={row.original} />,
  },
];

This is my cell Action component,

  const CellAction: FC<CellActionProps> = ({ data }) => {
  const navigate = useNavigate();

  return (
    <div className="h-[30px] w-[160px] relative">
      <div className="absolute flex gap-3 w-[160px]">
        {/* Pay button */}
        <Button className="h-7 w-[55px] justify-center flex gap-1 rounded-sm bg-secondaryLightBlue text-[16px] font-bold text-white shadow-md hover:bg-secondaryLightBlue/70">
          Pay
        </Button>
        {/* Edit fund icon */}
        <AddFund type="icon" data={data} />
        {/* Notes icon */}
        
      </div>
    </div>
  );
};```

Here I'm not getting the row's original data properly when the page changes. Any help on this would be appreciated.