title: setFieldValue in Formik not working correctly on cancel
body: <p>I have two components. My Formik initial values are in the MyDetails component. I have a form in NewDetailsForm. I am trying to set a default value to material UI select (identityType field in NewDetailsForm). I am setting an initial value in the first form and getting it via values using useFormikContext in the second. When I click the next button, I have another component where all the values appear. For example, I have 2 identity types - passport(default) and ID. When I select ID, it appears on the next screen which means that setFieldValue is working. The problem is that when I click previous or cancel, the other fields remain filled, but the identityType is being set to the default.</p>
  <p>MyDetails:</p>
  <pre><code>const validateSchema = yup.object({
    identityType: yup.string().required(&quot;This field is required&quot;),
  });
  
  const PersonalDetails: React.FC&lt;IProps&gt; = ({
    setValues,
    formikValues,
    progress,
    regress,
    formRef,
  }: IProps): JSX.Element =&gt; {
    
    return (
      &lt;Formik&lt;NewClientPersonalDetailsProps&gt;
        validationSchema={validateSchema}
        initialValues={{
          ...formikValues.personalDetails,
          
          //ID Type default value id
          identityType: &quot;Passport&quot;,
        }}
        innerRef={formRef}
        onSubmit={(values) =&gt; {
          setValues({
            ...formikValues,
            personalDetails: {
              ...values,
            },
          });
          values.submitDirection === &quot;progress&quot; ? progress() : regress();
        }}
      &gt;
        {({ values }) =&gt; {
          
          return (
            &lt;div &gt;
                    &lt;NewClientDetailsForm
                      identityTypes={removeOtherType(lookupData.identityTypes)}
                      
                    /&gt;
            &lt;/div&gt;
          );
        }}
      &lt;/Formik&gt;
    );
  };
  
  interface IProps {
    formikValues: NewClientInputProps;
  
    setValues(values: NewClientInputProps): void;
  
    progress(): void;
  
    regress(): void;
  
    formRef: React.RefObject&lt;FormikProps&lt;NewClientPersonalDetailsProps&gt;&gt;;
  }
  
  interface ExportProps {
    formikValues: NewClientInputProps;
  
    setValues(values: NewClientInputProps): void;
  
    progress(): void;
  
    regress(): void;
  
    formRef: React.RefObject&lt;FormikProps&lt;NewClientPersonalDetailsProps&gt;&gt;;
  }
  
  function MyDetails({
    setValues,
    formikValues,
    regress,
    progress,
    formRef,
  }: ExportProps) {
    return (
      &lt;Suspense fallback={&lt;EnhancedCircularProgress /&gt;}&gt;
        &lt;PersonalDetails
          formikValues={formikValues}
          setValues={setValues}
          regress={regress}
          progress={progress}
          formRef={formRef}
        /&gt;
      &lt;/Suspense&gt;
    );
  }
  
  export default MyDetails;
  </code></pre>
  <p>NewDetailsForm:</p>
  <pre><code>const NewDetailsForm: React.FC&lt;IProps&gt; = ({
    submitForm,
    identityTypes,
    genders,
  }: IProps) =&gt; {
    const { values, setFieldValue, touched, errors } = useFormikContext&lt;NewClientInputDTO&gt;();
    
    const getOptions = (myArr: ILookup[]) =&gt; {
      if (myArr) {
        return myArr.map((option: ILookup) =&gt; (
          &lt;MenuItem value={option.id} key={option.id}&gt;
            {option.description}
          &lt;/MenuItem&gt;
        ));
      }
      return null;
    };
  
    return (
      &lt;Form&gt;
          &lt;Box&gt;
            &lt;Box width=&quot;100%&quot; paddingRight={2}&gt;
              &lt;StyledSelectFormControl required fullWidth size=&quot;small&quot;&gt;
                &lt;InputLabel id=&quot;identityType-select-label&quot;&gt;ID Type&lt;/InputLabel&gt;
                &lt;Select
                  label=&quot;ID Type *&quot;
                  name=&quot;identityType&quot;
                  value={values.identityType}
                  onChange={(event) =&gt; {
                    setFieldValue(&quot;identityType&quot;, event.target.value);
                  }}
                  error={
                    touched.identityType &amp;&amp;
                    Boolean(touched.identityType)
                  }
                &gt;
                  {getOptions(identityTypes)}
                &lt;/Select&gt;
                &lt;FormHelperText&gt;{touched.identityType &amp;&amp; errors.identityType}&lt;/FormHelperText&gt;
              &lt;/StyledSelectFormControl&gt;
            &lt;/Box&gt;
          &lt;/Box&gt;
          &lt;Box className={classes.rowContainer}&gt;
          
            &lt;FTextField
              variant={&quot;outlined&quot;}
              label=&quot;Gender&quot;
              fullWidth
              select
              field={{ name: &quot;genderId&quot; }}
              size=&quot;small&quot;
              required
            &gt;
              {genders &amp;&amp;
                genders.map((option: ILookup) =&gt; (
                  &lt;MenuItem value={option.id} key={option.id}&gt;
                    {option.description}
                  &lt;/MenuItem&gt;
                ))}
            &lt;/FTextField&gt;
          &lt;/Box&gt;
          {isEditable &amp;&amp; submitForm &amp;&amp; (
            &lt;Box display={&quot;flex&quot;} justifyContent={&quot;flex-end&quot;}&gt;
              &lt;Button
                style={{ width: 176 }}
                variant={&quot;contained&quot;}
                size={&quot;small&quot;}
                color={&quot;primary&quot;}
                disableElevation
                onClick={() =&gt; submitForm()}
              &gt;
                Save
              &lt;/Button&gt;
            &lt;/Box&gt;
          )}
        &lt;/Box&gt;
      &lt;/Form&gt;
    );
  };
  interface IProps {
    submitForm?: () =&gt; void;
    identityTypes: Array&lt;ILookup&gt;;
    genders: Array&lt;ILookup&gt;;
  }
  export default NewDetailsForm;
  </code></pre>