can't access property Symbol.for("trpc_untypedClient"), client is undefined

    const onClick = async () => {
        try {
            console.log("clicked");
            const response = await increaseStreakQuery.mutateAsync();
            console.log(response);
        } catch (error) {
            console.error("Error increasing streak:", error);
        }
    };

function makeQueryClient() {
    return new QueryClient({
        queryCache: new QueryCache({
            onError: (error) => {
                const requestId = extractRequestId(error);
                if (requestId) {
                    Sentry.setContext("request", { id: requestId });
                }

                Sentry.captureException(error);
            },
        }),
        mutationCache: new MutationCache({
            onError: (error, _, __, mutation) => {
                console.log("Mutation Cache Error");
                const requestId = extractRequestId(error);
                if (requestId) {
                    Sentry.setContext("request", { id: requestId });
                }

                Sentry.captureException(error);
            },
        }),
    });
}

let browserQueryClient: QueryClient | undefined = undefined;

function getQueryClient() {
    if (typeof window === "undefined") {
        // Server: always make a new query client
        return makeQueryClient();
    } else {
        // Browser: make a new query client if we don't already have one
        // This is very important, so we don't re-make a new client if React
        // suspends during the initial render. This may not be needed if we
        // have a suspense boundary BELOW the creation of the query client
        if (!browserQueryClient) browserQueryClient = makeQueryClient();
        return browserQueryClient;
    }
}

export function Providers({ children }: { children: ReactNode }) {
    const queryClient = getQueryClient();
    const [trpcClient] = useState(trpc);
    const analytics = useAnalytics();

    return (
        <QueryClientProvider client={queryClient}>
            <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
                          ....
            </TRPCProvider>
        </QueryClientProvider>
    );