getServerSideProps with react-query doesn't work (prefetchQuery)

Question

First of all, I'm using a custom hook for react-query. The custom hooks is as follows.

export const useGetUser = (id: number) => {
  return useQuery<User, Error>(
    ['useGetUser'],
    () => Api.getUser(id),
    {
      retry: false,
      refetchOnWindowFocus: false,
      enabled: !!id,
    },
  );
};

I would like to pre-fetch user data using prefetchQuery. When I checked the props on console, There's an id but nothing exists inside the queries array in the dehydratedState.

import { QueryClient, dehydrate, useQuery } from 'react-query';
import { GetServerSideProps } from 'next';
import Api from '@apis/Api';
import { useGetUser } from '@hooks/useGetUser’;

const Edit = (props) => {
  console.log(props);
  const { data } = useGetUser(props.id);

  return (
    <Layout>
      …
    </Layout>
  );
};

export const getServerSideProps: GetServerSideProps = async ({ query }) => {
  const { id } = query;
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery(['useGetUser'], () =>
    Api.getUser(Number(id)),
  );
  return {
    props: {
      dehydratedState: dehydrate(queryClient),
      id: Number(id),
    },
  };
};

export default Edit;

On the other page, I was able to get the pre-fetch data using prefetchQuery in getServerSideProps in the same way as above.

The other page works well, but the page I'm working on now doesn't work well.

Can you tell me what the problem is?