Hello. I want to connect my next app with my supabase database to send form data via server actions.
The MoodForm consists of clientside code to perform clientside form validation. Hence I pass the server action to the client component as described in the nextjs guide https://nextjs.org/docs/app/building-your-application/data-fetching/server-actions-and-mutations#passing-actions-as-props.

app/page.tsx

 
import { cookies } from 'next/headers';
import { MoodForm } from '@/components/MoodForm';
import { CreateMood } from '@/domain/mood';
import { createClient } from '@/utils/supabase/server';

export default async function HomePage() {
    const cookieStore = await cookies();
    const supabase = createClient(cookieStore);

    async function createMoodAction(form: CreateMood) {
        'use server';
        await supabase.from('entries').insert(form);
    }

    return (
        <MoodForm createMoodAction={createMoodAction} />
    );
}

However, when submitting the form, I get an error, that only plain objects can be passed from server to client components.

Error: Only plain objects, and a few built-ins, can be passed to Client Components from Server Components. Classes or null prototypes are not supported.
  [{supabaseUrl: ..., supabaseKey: ..., realtimeUrl: ..., authUrl: ..., storageUrl: ..., functionsUrl: ..., storageKey: ..., headers: ..., auth: ..., fetch: ..., realtime: ..., rest: ...}]

What are the alternatives here?
Am I supposed to avoid any third party code in server actions?

Thank you for any insights! :)
I'm happy to share more code if required.