nextjs hydration error useQuery & useMutation

I am fetching data server side via a server action. I then pass this data to a client component. Within the client component I pass the data as initial data to useQuery. Then use the useQuery data within a table. I have another component that calls the useMutation hook and invalidates the query client onSuccess. Everything works fine from initial load to mutating and adding another record to my table. But I get a hydration error after calling useMutation and refreshing the page. Any idea why ? My goal is to load initial data server side then manage this data client side via react query. It's confusing navigating to the page renders with no issues. The useMutation works and renders the new record after invalidation within the onSuccess callback. But then after when refreshing I get a hydration error. I think it has something to do with caching... not sure if its nextjs or react queries cache uggghhhh