title: How do I set initialValues of useFormik to data returned from an API request
body: <p>I have an update ProfilePage component and I want to preload the form values with the data received from an Axios API request using useQuery, but it seems the useFormik initialValues render before the request is completed therefore having the initial values to be undefined, can anyone help me ?</p>
  <pre><code>  const { isSuccess, data } = useQuery(&quot;author&quot;, async () =&gt; {
      const endPoint = `${baseURL}/auth/author`;
      return Axios.get(endPoint, {
        headers: {
          &quot;x-auth-token&quot;: token,
        },
      })
        .then(({ data }) =&gt; {
          return data.author;
        })
        .catch((err) =&gt; {
          setErrors(err.response.data.errors[0].msg);
          console.log(errors);
        });
    });
  
    const formik = useFormik({
      initialValues: {
        firstname: data.firstname,
        lastname: data.lastname,
        gender: data.gender,
        dob: data.dob,
        email: data.email,
        oldPassword: &quot;&quot;,
        newPassword: &quot;&quot;,
        confirmNewPassword: &quot;&quot;,
        profilePic: &quot;&quot;,
      },
      validationSchema: Yup.object({
        firstname: Yup.string()
          .max(20, &quot;First Name must not be more that 20 characters&quot;)
          .required(&quot;Required*&quot;),
        lastname: Yup.string()
          .max(20, &quot;Last Name must not be more that 20 characters&quot;)
          .required(&quot;Required*&quot;),
        gender: Yup.string().required(&quot;Required*&quot;),
        dob: Yup.string().required(&quot;Required*&quot;),
        email: Yup.string()
          .email(&quot;Must be a Valid Email Address&quot;)
          .required(&quot;Required*&quot;),
        oldPassword: Yup.string().min(
          6,
          &quot;Your password must be more than 6 characters&quot;
        ),
        newPassword: Yup.string().min(
          6,
          &quot;Your password must be more than 6 characters&quot;
        ),
        confirmNewPassword: Yup.string(),
      }),
      onSubmit: (values) =&gt; {
        console.log(values);
      },
    });
  </code></pre>
  <p>The error I get is <code>Cannot read properties of undefined (reading 'firstname')</code>
  if I could get a way make useFormik render just after the API request it'd help</p>