Hi

I'm trying to use the new Server Actions to process some form data, but as soon as I use a loop in the function, I get an error that "Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server"".

Here's the basic code of my component:

export default async function Home() {
    const items = await getData(); // fetch available items from Airtable

    async function create(formData: FormData) {
        'use server'

        wines.forEach((item) => {
            const count = formData.get(`${item.id}.count`);
            console.log(count);
        });
    }

    return (
        <form action={create}>
            {items.map((item) => (
                <p key={item.id}>
                    <label>{item.name}</label>
                    <input type="number" name={`${item.id}.count`}/>
                </p>
            ))}
            <button type="submit">Order</button>
        </form>
    );
}