How to Handle Errors in Server Actions?

Hi guys!I keep getting this within my HTML in prod:

javascript:throw new Error('A React form was unexpectedly submitted. If you called form.submit() manually, consider using form.requestSubmit() instead. If you\'re trying to use event.stopPropagation() in a submit event handler, consider also calling event.preventDefault().')

It is within the form element.

I read that it is probably due to the fact that I'm using an hadnler rather than passing the action directly to the form... but then - how am I supposed to handle client-side errors such as toast popup etc.?

Here is my code:

'use client'
...

export default function MatchingForm(props) {

  const { formState, setField, resetForm } = useFormLocalStorage(
    initialState,
    `matchingData_${hubName}`
  )

  ...

  // Handles form submission or action
  async function handleAction() {
    const { errors, pendingRoundtableID } = await submitMatchingForm(
      matchingPreferenceFormWithAnswers,
      hubName,
      inviteID
    )

    if (errors) {
      toast.error(`Something went wrong)
      setIsSubmitting(false)
      return
    }
  }

  return (
        <form
          action={handleAction}
          className="max-w-xl mx-auto mt-16 space-y-16 pb-[160px]">
          ...
        </form>

  )
}

Just to calrify - the action works but it seems wrong to have that code inside the form...