Problem with Data Not Showing on Page Change in Table

[EasyTrust]

Hi, I'm encountering an issue with a table in my React project. When I change the page, the backend is called, and the correct data is sent. However, the data is not displayed in the table, even though the response from the server seems correct.
I did the same on my other app with Mobx there was no issue

// The Zustand Store

import { Pagination } from '../../types/pagination';
import { create } from 'zustand';

interface ListQuery {
  pagination: Pagination;
  partyId: number;
}
interface ListQueryStore {
  listQuery: ListQuery;
  setPartyId: (partyId: number) => void;
  setPagination: (pagination: Pagination) => void;
}

export const useAccountListQueryStore = create<ListQueryStore>((set) => ({
  listQuery: {
    pagination: {
      currentPage: 1,
      itemsPerPage: 5,
      totalItems: 0,
      totalPages: 0,
    },
    partyId: 0,
  },

  setPartyId: (partyId) =>
    set((state) => ({
      listQuery: { ...state.listQuery, partyId },
    })),
  setPagination: (pagination) =>
    set((state) => ({
      listQuery: { ...state.listQuery, pagination },
    })),
}));

// Fetch Employee Accounts Query

export const useAccountsQuery = () => {
  const { listQuery } = useAccountListQueryStore();

  const params = new URLSearchParams();
  params.append('pageNumber', listQuery.pagination.currentPage.toString());
  params.append('pageSize', listQuery.pagination.itemsPerPage.toString());

  return useQuery<PaginatedResult<ListResponse[]>>({
    queryKey: ['accounts', listQuery],
    queryFn: async () => {
      const result = await agent.account.list(params);
      return result ?? { data: [], pagination: {} };
    }, 
  });
};

// The List Component

export function ListView() {
  const { listQuery, setPagination } = useAccountListQueryStore();
  const { data: tableData, isLoading } = useAccountsQuery ();

const table = useTable();

  const dataFiltered = applyFilter({
    inputData: tableData?.data || [],
    comparator: getComparator(table.order, table.orderBy),
  });

 const [page,setPage]=useState(0)

  const handleChangePage = (event: unknown, newPage: number) => {
    setPagination({
      ...listQuery.pagination,
      currentPage: page+ 1,
    });
    setPage(newPage);
  };
  return (
    <>
        <Card>
          <Box>
            <TableContainer>
              <Table >
                <TableHeader     />
                <TableBody>
                  {dataFiltered
                    .slice(
                      page * table.rowsPerPage,
                      page * table.rowsPerPage + table.rowsPerPage
                    )
                    .map((row) => (
                      <ListTableRow
                        key={row.detialId}
                        row={row}
                       
                      />
                    ))}
                </TableBody>
              </Table>
            </TableContainer>
          </Box>
          {!isLoading && (
            <TablePaginationCustom
              page={page}
              count={tableData?.pagination.totalItems || 0}
              rowsPerPage={table.rowsPerPage}
              onPageChange={handleChangePage}
              onRowsPerPageChange={handleChangeRowsPerPage}
            />
          )}
        </Card>
      
    </>
  );
}
type ApplyFilterProps = {
  inputData: AccountListResponse[];
  comparator: (a: any, b: any) => number;
};
function applyFilter({ inputData, comparator }: ApplyFilterProps) {
  const stabilizedThis = inputData.map((el, index) => [el, index] as const);
  stabilizedThis.sort((a, b) => {
    const order = comparator(a[0], b[0]);
    if (order !== 0) return order;
    return a[1] - b[1];
  });

  inputData = stabilizedThis.map((el) => el[0]);

  return inputData;
}

[TkDodo]

This question is better asked in the react-table repo. Query usage looks okay.