React Query refetching on each refresh for globally avaliable component even after persisting

Hi, I'm encountering an issue with React Query's persistence in my Next.js website. The data is being correctly persisted in localStorage, and when I use useQuery on a specific page or route, it hydrates properly from the persisted data. However, when I use useQuery in a globally available component, like my Cart component (which is part of the navbar and included in the layout, making it accessible across all pages), the query doesn't seem to hydrate from the persisted data. Instead, it makes a fresh request to the endpoint on every refresh. The query behaves as expected when used in pages but not within this globally available component. I’ve also recently transitioned from Redux Toolkit to React Query, so there's some commented-out Redux code. Here's how I'm using useQuery in the Cart component. Any help or insights would be greatly appreciated!

message.txt