I am sending down async event handlers to a component, where it gets called together with

async function handleSubmit(event: FormEvent<HTMLFormElement>) {
    event.preventDefault()
    
    const formData = new FormData(event.currentTarget/*.target*/)
    await onSubmit(formData)
    
    if (doHideFormAfterSubmit) setIsFormSubmitted(true)
  }

and this function is passed to the onSubmit property of the <form> element.
The full error I'm getting is:

- error node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1902:12) @ resolveModelToJSON
- error Error: Event handlers cannot be passed to Client Component props.
  <... name=... submitButtonLabel=... onSubmit={function} afterSubmitChildren=... children=...>
                                               ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
    at stringify (<anonymous>)
null
- error node_modules\next\dist\compiled\react-server-dom-webpack\cjs\react-server-dom-webpack-server.edge.development.js (1902:12) @ resolveModelToJSON      
- error Error: Event handlers cannot be passed to Client Component props.
  <... name=... submitButtonLabel=... onSubmit={function} afterSubmitChildren=... children=...>
                                               ^^^^^^^^^^
If you need interactivity, consider converting part of this to a Client Component.
    at stringify (<anonymous>)
digest: "3042938249"
null

When I turn the callbacks passed down to the form component into server actions, this error disappears, but then I get this warning:

Warning: Detected multiple renderers concurrently rendering the same context provider. This is currently unsupported.

The warning itself is long and repeats a few times. Also, my callback doesn't run when I turn it into a server action.

What may be the issue? I'm blocked by this 😦 I'm trying to call functions from my Firestore repository.