我尝试为用户创建一个注册页面，并使用react-hook-forms作为注册表单，使用zod进行验证。当我测试表单时，起初我可以输入任何内容，但只有在提交后才会显示错误。然而，在此之后，错误不断中断键入，例如密码输入中断时，我得到八个字符，并再次当我键入一个数字。这也发生与电子邮件的输入也与其各自的消息错误。
我的react-hook-forms设置为on { mode：“onSubmit”}。

import { useForm } from "react-hook-form";
import { z } from "zod";
import RegisterSchema from "../components/Authentication/Register/RegisterSchema";
import { AuthTitle } from "../components/Authentication";
import { zodResolver } from "@hookform/resolvers/zod";

type RegisterSchemaType = z.infer<typeof RegisterSchema>

type FormFieldProps = {
  labelText: string;
  inputText: string;
  registerInput: keyof RegisterSchemaType;
};

const Register = () => {

  const {
    register,
    handleSubmit,
    formState: { errors }
  } = useForm<RegisterSchemaType>({ resolver: zodResolver(RegisterSchema), mode: "onSubmit"});

  const onSubmit = (data: RegisterSchemaType) => {
    console.log(data);
  }; 

  console.log(errors);

  const FormFields = ({ labelText, inputText, registerInput } : FormFieldProps) => (
    <div className='flex flex-col'>
      <label className='uppercase text-[#49A078] text-sm sm:text-md' htmlFor={inputText}>
        {labelText}
      </label>
      <div className="flex flex-col relative">
        <input
          {...register(registerInput)}
          className='mb-1 mt-1 p-3 outline-1 outline-[#263228] outline rounded-sm pr-5 focus:outline-[#49A078] focus:outline-2'
        />
        {errors[registerInput] && (
          <span className="text-red-500 text-sm mt-0 mb-4">{errors[registerInput]?.message}</span>
        )}
      </div>
    </div>
  );

  return (
    <div className="flex flex-col h-screen justify-center items-center">
      <AuthTitle title="Trace" subTitle="Register" />

      <div className="flex md:flex-row flex-col">
        <form className="flex flex-col p-5 pr-8 border-r border-gray-400" onSubmit={handleSubmit(onSubmit)}>
          <FormFields labelText="First Name" inputText="firstName" registerInput="firstName"/>
          <FormFields labelText="Surname" inputText="surname" registerInput="surname"/>
          <FormFields labelText="Email Address" inputText="email" registerInput="email"/>
          <FormFields labelText="Password" inputText="password" registerInput="password"/>
          <button className="bg-[#263228] text-white p-3 rounded-sm uppercase mt-3" type="submit">
            Register
          </button>
        </form>

        {/* OAuth buttons */}
        <div className="flex items-center justify-center p-4">
          {/* Google OAuth */}
          {/* You may need to replace this with the appropriate library */}
          <h1>LOREM IPSUM</h1>

          {/* Apple OAuth */}
          {/* Add Apple OAuth button here */}
        </div>
      </div>

      {/* Bottom link */}
      <div className="mt-auto">
        <p className="text-center text-[#49A078] uppercase">Already have an account?</p>
      </div>
    </div>
  );
};

export default Register;

字符串
这是我的RegisterSchema

import { z } from "zod";

const RegisterSchema = z.object({
  email: z.string().email({message: "Invalid email."}),
  firstName: z.string().min(2, {message: "Must be 2 or more characters long."}),
  surname: z.string().min(2, {message: "Must be 2 or more characters long."}),
  password: z.string()
    .min(8, {message: "Must be 8 or more characters long."})
    .refine((password) => /\d/.test(password), {message: 'Must contain at least 1 number.',})
});

export default RegisterSchema;

型
有没有一种方法可以让错误不中断输入字段的输入？我在网上看过react-hook-forms，当错误出现时，输入字段仍然是可输入的。
我已经尝试了useForm方法的不同模式以及React的State变量，没有一个有效。