Javascript 使用 Formik 和 Yup Select 按钮时，单选按钮验证不会消失

我正在用NextJS处理一个注册表单，我使用form中的Formik和Yup进行验证，除了radio buttons之外，所有东西都正常工作.错误显示正确，但当我 Select 单选按钮时，错误不会消失.我找不到解决这个问题的办法.

这是我的表格代码:

<Formik
        initialValues={{
          email: "",
          password: "",
          confirmPassword: "",
          accountType: "",
          accountDescribe: "",
        }}
        validationSchema={validate}
        onSubmit={values => console.log("register", values)}
      >
        {formik => (
          <div>
            <Form className="space-y-6">
              <div>
                <label
                  for="email"
                  className="block text-sm font-medium text-gray-700"
                >
                  {" "}
                  Email address{" "}
                </label>
                <div className="mt-1">
                  <TextField id="email" name="email" type="email" />
                </div>
              </div>

              <div>
                <label
                  for="password"
                  className="block text-sm font-medium text-gray-700"
                >
                  {" "}
                  Password{" "}
                </label>
                <div className="mt-1">
                  <TextField
                    id="password"
                    name="password"
                    type="password"
                  />
                </div>
              </div>
              <div>
                <label
                  for="confirmPassword"
                  className="block text-sm font-medium text-gray-700"
                >
                  {" "}
                  Confirm password{" "}
                </label>
                <div className="mt-1">
                  <TextField
                    id="confirmPassword"
                    name="confirmPassword"
                    type="password"
                  />
                </div>
              </div>

              <div class="mt-4">
                <span class="text-gray-700">
                  How did you hear about us?
                </span>
                <div class="mt-2">
                  <Radio
                    type="radio"
                    name="accountType"
                    value="google"
                    label="Google"
                  />
                  <Radio
                    type="radio"
                    name="accountType"
                    value="facebook"
                    label="Facebook"
                  />
                  <Radio
                    type="radio"
                    name="accountType"
                    value="instagram"
                    label="Instagram"
                  />
                  <Radio
                    type="radio"
                    name="accountType"
                    value="person/bussiness"
                    label="Person/Bussiness"
                  />
                  <Radio
                    type="radio"
                    name="accountType"
                    value="other"
                    label="Other"
                  />
                </div>
                <span className="text-red-600">
                  <ErrorMessage
                    name="accountType"
                    className="text-red-600"
                  />
                </span>
              </div>
              <div class="mt-4">
                <span class="text-gray-700">What best describe you?</span>
                <div class="mt-2">
                  <Radio
                    type="radio"
                    name="accountDescribe"
                    value="salon, spa or barbershop owner"
                    label="Salon, spa or Barbershop Owner"
                  />
                  <Radio
                    type="radio"
                    name="accountDescribe"
                    value="licensed professional"
                    label="Licensed professional"
                  />
                  <Radio
                    type="radio"
                    name="accountDescribe"
                    value="student"
                    label="Student"
                  />
                  <Radio
                    type="radio"
                    name="accountDescribe"
                    value="school"
                    label="School"
                  />
                </div>
                <span className="text-red-600">
                  <ErrorMessage name="accountDescribe" />
                </span>
              </div>
              <div>
                <button
                  type="submit"
                  className="w-full flex justify-center py-2 px-4 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                >
                  Register
                </button>
              </div>
            </Form>
          </div>
        )}
      </Formik>

这是我的验证模式:

const validate = Yup.object().shape({
email: Yup.string().email("Email id invalid").required("Email is required"),
password: Yup.string()
  .min(6, "Password must be at least 6 characters")
  .required("Password is required"),
confirmPassword: Yup.string()
  .oneOf([Yup.ref("password"), null], "Password must match")
  .required("Confirm password is required"),
accountType: Yup.string().required("Select one of the above button"),
accountDescribe: Yup.string().required("Select one of the above button"),
});

这是我的单选按钮组件:

import {useField} from "formik";
export const Radio = ({type, label, ...props}) => {
const [field, meta] = useField(props);
console.log(props);
return (
 <>
  <label class="inline-flex items-center mr-6">
    <input type={type} name={field.name} value={field.value} />
    <span class="ml-2">{label}</span>
  </label>
 </>
);
};