Hydration Issue in Next JS

I have created a simple demo setup to showcase my issue. please find the sandbox link. please fork and use https://codesandbox.io/p/devbox/test-xxhhfy First, I am prefetching the user data in the page.tsx as instructed in https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr. The initial render on the server works fine. The counter value is incremented when the user clicks on the like/dislike button. till here everything works fine but when I refresh the page, the initial rendered data is coming instead of the latest data after the user updates the value by clicking. Can you please tell me where I am making the mistake?