i am very new to web development and am currently trying to make a auth through discord, i have followed the next auth documentation but i cant seem to use a function in a component as how NextAuth did in the documentation. i have already tried marking th page with "use server"; but i get no change

error:

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".
  <... title="Sign in" styles=... handleClick={function}>

component:

<CustomButton
                    title='Sign in'
                    styles='text-primary-blue rounded-full min-w-[130px]'
                    handleClick={() => signIn()}
                />

[...nextauth].ts

// pages/api/auth/[...nextauth].ts
import NextAuth from 'next-auth';
import Discord from "next-auth/providers/discord";
import {CLIENT_ID, CLIENT_SECRET} from "../../../../Constants";

export default NextAuth({
    providers: [
        Discord({
            clientId: CLIENT_ID,
            clientSecret: CLIENT_SECRET,
        }),
    ],
    secret: "moodyisalwaysthebest",
    callbacks: {
        async signIn() {
            // Access user, account, and profile using params object

            return true; // Allow sign-in
        },
        async redirect(params) {
            // Access url and baseUrl using params object
            const {url, baseUrl} = params;

            return url.startsWith(baseUrl) ? url : baseUrl;
        },
    },

    pages: {
        signIn: '/signin',
    },
});