react-pagination hangs when requesting a server with react-query

Question

When I click on a pagination element, for example: "2", then a class add to it, which changes the color to the active element. At this moment, braking is felt, and if, for example, you quickly switch between phenomena, then this is clearly noticeable. If you remove the TransactionLayout component, then the hang disappears.

Here I make a request to the server, I also add filters, page to the react-query dependency so that when the filters change, a new request to the server is made.

export default function TransactionPage() {
  const [limit, setLimit] = useState(10);
  const [filters, setFilters] = useState({ limit });

  const [page, setPage] = useState(1);
  const [cachedTotalPage, setTotalPage] = useState(0);
  const { data, isLoading, isError, error } =   useQuery(
    ['transactions', {...filters, page}],
    () => TransactionService.getAll({...filters, page}),

    {
      cacheTime: 60 * 60 * 1000,
      staleTime: 60 * 60 * 1000,
    }
  );


  const handlePage = (e) => {
    setPage(e.selected + 1);
  };

  useEffect(() => {
    if (data && data.count !== cachedTotalPage) {
      setTotalPage(Math.floor(data.count / limit));
    }
  }, [data, limit]);

  return (
      <Card py="20px">
        <TransactionFilters
          data={data}
          filters={filters}
          setFilters={setFilters}
          setLimit={setLimit}
          limit={limit}
        />
        <TransactionsLayout
          data={data}
          isLoading={isLoading}
          isError={isError}
          error={error}
        />

        <Box ml="20px">
       <ReactPaginate
      breakLabel="..."
      nextLabel="&#8250;"
      onPageChange={handlePage}
      pageRangeDisplayed={5}
      pageCount={cachedTotalPage}
      previousLabel="&#8249;"
      renderOnZeroPageCount={false}
      containerClassName={styles.pagination__container}
      disabledClassName={styles.pagination__disabled}
      pageLinkClassName={styles.pagination__item}
      previousLinkClassName={styles.pagination__arrow}
      nextLinkClassName={styles.pagination__arrow}
      activeLinkClassName={styles['pagination__item--active']}
    />
        </Box>
      </Card>
  );
}

With the current business logic, if you comment out TransactionLayout, then the hang disappears. And I also decided to use a regular axios query instead of useQuery, which places the result in the data state, and these freezes disappear. This means the problem is in useQuery. Are there any solutions?