Next.js 13, SSR & two queries while using hydration

import axios from "axios";

export const fetchPublicInvestments = async () => {
    console.log("Fetching public investments");
    const response = await axios.get("/api/public/investments").then((res) => res.data)
    console.log("public investments", response)
    return response
}

import {useState} from "react";

import {
    Hydrate,
    QueryClient,
    QueryClientProvider,
} from '@tanstack/react-query'
import '@/styles/globals.scss'
import Layout from '@/components/Layout/Layout';
import axios from 'axios';
axios.defaults.baseURL = 'http://localhost:3000';

export default function App({ Component, pageProps }) {
    const renderWithLayout =
        Component.getLayout ||
        function (page) {
            return <Layout>{page}</Layout>;
        };

    const [queryClient] = useState(()=> new QueryClient())

  return renderWithLayout(
      <QueryClientProvider client={queryClient}>
            <Hydrate state={pageProps.dehydratedState}>
                <Component {...pageProps} />
            </Hydrate>
      </QueryClientProvider>
  );
}

export async function getServerSideProps() {
    const queryClient = new QueryClient()
    await queryClient.prefetchQuery({queryKey: "publicInvestment", queryFn: fetchPublicInvestments})

    return {
        props: {
            dehydratedState: dehydrate(queryClient)
        }
    }
}


export default function InvestmentsPublic() {
    const {isLoading, error, data, isFetching, isError} = useQuery({
            queryKey: ["publicInvestment"],
            queryFn: fetchPublicInvestments,
            staleTime: 60 * 24 * 10,
            refetchOnMount: false,
            refetchOnWindowFocus: false
        }
    );

}