I need to build a form fairly quickly and I don't have much time to reinvent the wheel, as much as I would like to. For that reason I've just gone with react-hook-form, zod and server actions. I don't want to get into whether that's a good combination/suitable as I would prefer to not use it but I hoped it would be an easier solution.
I'm currently getting the classic error that functions cannot be passed directly to client components but it's not pointing out exactly where this is happening and I'm failing to find it with my own eyes. Here's the error:

Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server". Or maybe you meant to call this function rather than return it.
  [[...], function, function, ...]
                    ^^^^^^^^

The array of functions is not a helpful indicator this, I don't think.
I'm creating my client form like so:

"use client";
// ...

const resolver = zodResolver(SCHEMA); // the schema is a shared export from a TS file used on the client and server

export const TestForm = ({ onSubmit }: FormProps) => {
  const [state, action, isPending] = useActionState<Resp<unknown> | null, FormData>(
    onSubmit,
    null,
  );

  const {
    register,
    formState: { errors },
  } = useForm<FormType>({
    mode: 'onBlur',
    resolver,
  });

  return (
    <Form action={action}>
      <Input {...register('name')} hasError={!!errors.name} type="text" />
      <button type="submit" disabled={isPending}>
        Submit
      </button>
    </Form>
  );
};

and I construct this form component in the page.tsx file as shown:

const Page = async () => {
  return <TestForm onSubmit={formActionSubmit} />;
};

... continued in comment