router.replace resets Tanstack Table's paginations page index to it's initial value

Question

I'm using next.js 14 and Tanstack Table to list my data and I wanted to store filters and pagination as search parameters. I managed to store filters but when it comes to pagination there is this issue.

const [pagination, setPagination] = React.useState(() => {
  const pageIndex = searchParams.get("pageIndex");
  const pageSize = searchParams.get("pageSize");

  if (pageIndex && pageSize) {
    return {
        pageIndex : +pageIndex,
        pageSize : +pageSize,
    };
  } else {
    return {
      pageIndex : 0,
      pageSize : 13,
    };
  }
});

onPaginationChange: (i: any) => {
  const tempObject = await i(pagination);

  const oldParams = Object.fromEntries(searchParams.entries());
  const oldParamsUrl = new URLSearchParams(oldParams);

  oldParamsUrl.set("pageIndex", tempObject.pageIndex);
  oldParamsUrl.set("pageSize", tempObject.pageSize);
  router.replace("?" + oldParamsUrl.toString());

  setPagination(tempObject);
}

I can story pageSize in the url but when I try to store pageIndex it immediately changes to the initial state. I'm open to any ideas. Thank you.

I'm expecting it not to reset to it's initial state.