Hello, I'm using a form and when submitting I encounter the notorious console error:

Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. 

  <form
+    method="POST"
-    method={null}
     action={function bound dispatchActionState}
     className="grid gap-2 relative"
  >

Here is the relevant client component code that is causing the error:

import { ActionResult } from "@/app/types";
import { ReactNode, useActionState } from "react";
import Card from "./Card";

export default function Form({
  children,
  formAction,
  title,
  subtitle,
  styles,
}: {
  children: ReactNode;
  formAction: (_: any, formData: FormData) => Promise<ActionResult>;
  title: string;
  subtitle: string;
  styles?: string;
}) {
  const [state, action, isLoading] = useActionState(formAction, {
    message: "",
    success: false,
  });

  return (
    <Card title={title} subtitle={subtitle} styles={styles || "max-w-md"}>
      <form method="POST" action={action} className="grid gap-2 relative">
        {children}
      </form>
    </Card>
  );
}

Thanks in advance.