NextJS 13.4 Pass an handleSubmit function from a server component to client component

Question

So basically I got my page.js skeleton using the default server component and return a reusable form component inside.

So I need the handleSubmit to be inside the page component and not inside the form component, so I can use the same form for multiple case by just passing different handleSubmit as props.

First it says I can't pass function as props to client component without the "use server", so I put it on the function.

But it doesn't work, when I submit the form I get errors such as "Maximum call stack size exceeded" or "Only plain objects can be passed to Client Components from Server Components. Classes or other objects with methods are not supported." or something else telling me to serialize something.

What I'm I supposed to do to pass an handleSubmit function from server to client component ?

It's supposed to be really basic stuff in react for reusability, and I can't get it to work unless it's in the client component.

export default async function PageServerComponent() {

    const handleSubmit = async (e) => {
        "use server"

        e.preventDefault()

        try {
            await newProduct(datas)
        } catch (error) {
            console.log(error)
        }
    }

    return(<ReusableFormClientComponent handleSubmit={handleSubmit} />)
}