Reactjs 映射值时，Formik是有效的更改

我正在初始化带有空值的状态的form数据。在此基础上，我调用了一个API来获取特定的权限，这些权限是该状态的。在设置这些权限之前，formik isValid工作正常，并使用Yup验证模式显示表单无效。但是一旦权限值被附加到表单状态，isValid就会显示表单是有效的我一输入内容isValid就开始工作。

我的状态和API调用：

const [formData, setFormData] = useState(inviteMemberObject);

useEffect(() => {
  axios({
    url: "/member/permssion/page",
    method: "GET",
    authToken: auth.authToken,
  })
    .then((response) => {
      if (response.data.status) {
        setFormData((prevValue) => ({
          ...prevValue,
          permissions: response.data.data.map((page) => ({
            ...page,
            access: false,
          })),
        }));
      }
    })
    .catch((error) => console.log(error));
}, [auth.authToken]);

成员对象：

export const inviteMemberObject = {
  firstName: "",
  lastName: "",
  email: "",
  gender: "",
  permissions: [],
};

Formik实例：

<Formik
  enableReinitialize
  initialValues={formData}
  validationSchema={validationSchema}
  validateOnMount
  onSubmit={handleSubmit}
>
  {({
    errors,
    handleBlur,
    handleChange,
    handleSubmit,
    isSubmitting,
    touched,
    values,
    isValid,
  }) => (
    <form noValidate onSubmit={handleSubmit}>
      <FormDisplay
        values={values}
        touched={touched}
        errors={errors}
        handleBlur={handleBlur}
        handleChange={handleChange}
        isSubmitting={isSubmitting}
        isValid={isValid}
      />
    </form>
  )}
</Formik>

import * as Yup from "yup";

const validationSchema = Yup.object().shape({
  firstName: Yup.string().max(25).required("First Name is required"),
  lastName: Yup.string().max(25).required("Last Name is required"),
  email: Yup.string()
    .email("Enter a valid email")
    .max(255)
    .required("First Name is required"),
  gender: Yup.string().required("Please select a gender"),
});

export default validationSchema;