Cannot use useSession hook

import { auth } from "@/auth";
import { toNextJsHandler } from "better-auth/next-js";

export const { POST, GET } = toNextJsHandler(auth);

"use client"

import { authClient } from "@/auth-client";
import { Button } from "@/components/ui/button";

export default function Home() {
    const { data: session } = authClient.useSession();

    return (
        <div>
            <Button
                onClick={(): void => {
                    authClient.signIn.social({
                        provider: "discord"
                    })
                }}
            >
                Se connecter
            </Button>

            <div>
                {JSON.stringify(session, null, 2)}
            </div>
        </div>
  );
}

import { betterAuth } from "better-auth";
import { drizzleAdapter } from "better-auth/adapters/drizzle";

import { db } from "@/db";
import * as schema from "@/db/schema";

export const auth = betterAuth({
    database: drizzleAdapter(db, {
        provider: "pg",
        schema: {
            ...schema,
            user: schema.user,
        },
    }),
    socialProviders: {
        discord: {
            clientId: process.env.DISCORD_CLIENT_ID as string,
            clientSecret: process.env.DISCORD_CLIENT_SECRET as string,
        },
    },
});

import { createAuthClient } from "better-auth/client"

export const authClient =  createAuthClient({
    baseURL: "http://localhost:3000"
})