Chakra UI Pagination + React Query: Controlled or Uncontrolled State?

Goal: Ensure that Chakra UI's Pagination component stays in sync with a data‑fetching hook such as React Query when implementing paginated loading of large datasets.

The Pagination component is stateless and requires a pageIndex prop and an onChange handler, forcing a controlled pattern. React Query, meanwhile, owns the query state and can refetch when pagination parameters change. This creates a boundary where the source of truth for the current page can live either in the Pagination UI or in the query hook, leading to uncertainty about which approach avoids prop mismatches, unnecessary re‑renders, or UI jumps when the dataset size changes.

Should the Pagination be left uncontrolled so it manages its own index internally? If kept controlled, how should the pageIndex be derived from React Query's state to prevent stale props? What safeguards prevent desynchronization when the total record count or filter criteria update?