title: Yup validation issue: Fields with their respective values present still says field is required
body: <p>I am using Yup validation along with formik. I have both initial values and validationSchema prepared and everything works fine during creating a form. But on updating the form, even when the values are pre-populated in their respective fields, still some of the fields say 'abc field is required'. (name and type fields are required according to the below issue)</p>
  <pre><code>const initialValues = {
  type: '',
  name: '',
  detail: {
      shareDetail: {
          tenantId: '',
          username: ''
      },
      blobDetail: {
          access: '',
          connection: ''
      }
  }
  }
  
  const validationSchema = Yup.object().shape({
  name: Yup.string().required(),
  type: Yup.string().required(),
  detail: Yup.object().required().when('type', {
      is: (selectedType) =&gt; selectedType === 'SHARE',
      then: Yup.object({
          shareDetail: Yup.object({
              tenantId: Yup.string().required(),
              username: Yup.string().required()
          })
      }),
      is: (selectedType) =&gt; selectedType === 'BLOB',
      then: Yup.object({
          blobDetail: Yup.object({
              access: Yup.string().required(),
              connection: Yup.string().required()
          })
      })
  })
  }, ['type'])
  </code></pre>
  <p>and my jsx is:</p>
  <pre><code> &lt;Formik initialValues={formData || initialValues} validationSchema={validationSchema} onSubmit={onSubmit} enableReinitialize validateOnMount&gt;
              {formik =&gt; {
                  return (
                      &lt;Form&gt;
                          &lt;h5&gt;Source&lt;/h5&gt;
                          &lt;div className='row'&gt;
                              &lt;div className='col-6'&gt;
                                  &lt;FormControl control='select' label='Type *' placeholder='Enter Source Type' name='type' options={sourceTypes} AutoComplete
                                      value={getSourceTypeValue(formik.values.type)} onChange={e =&gt; handleSourceTypeSelect(e, formik.setFieldValue)} onBlur={() =&gt; handleSourceTypeBlur(formik.setFieldTouched)}
                                      outlineDanger={formik.errors.type &amp;&amp; formik.touched.type ? 'mnd-danger' : ''} isDisabled={type !== 'createSourceButton'} /&gt;
                              &lt;/div&gt;
                              &lt;div className='col-12 mt-2'&gt;
                                  &lt;FormControl control='input' type='text' label='Name *' placeholder='Enter Source Name' name='name'
                                      version={formik.touched.name &amp;&amp; formik.errors.name ? 'mnd-danger' : ''} disabled={type !== 'createSourceButton'} /&gt;
                              &lt;/div&gt;
                              &lt;div className='col-12'&gt;
                                  &lt;FormControl control='textarea' type='text' placeholder='Enter Source Description' label='Source Description' rows='3' name='description' /&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;hr /&gt;
                          {formik.values.type === 'SHARE' &amp;&amp; &lt;&gt;
                              &lt;h5&gt;Source Details&lt;/h5&gt;
                              &lt;div className=&quot;row mt-3&quot;&gt;
                                  {type === 'createSourceButton' &amp;&amp; &lt;div className=&quot;col-6 mt-2&quot;&gt;
                                      &lt;FormControl control='input' type='text' label='Tenant Id *' placeholder='Enter Tenant Id' name='detail.shareDetail.tenantId'
                                          version={formik.touched.detail &amp;&amp; formik.errors.detail &amp;&amp; formik.touched.detail.shareDetail.tenantId &amp;&amp; formik.errors.detail.shareDetail.tenantId ? 'mnd-danger' : ''} /&gt;
                                  &lt;/div&gt;}
                                  &lt;div className=&quot;col-6&quot;&gt;
                                      &lt;FormControl control='input' type='text' label='Username *' placeholder='Enter Username' name='detail.shareDetail.username'
                                          version={formik.touched.detail &amp;&amp; formik.errors.detail &amp;&amp; formik.touched.detail.shareDetail.username &amp;&amp; formik.errors.detail.shareDetail.username ? 'mnd-danger' : ''} /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;hr /&gt;
                          &lt;/&gt;}
                          {formik.values.type === 'BLOB' &amp;&amp; &lt;&gt;
                              &lt;h5&gt;Source Details&lt;/h5&gt;
                              &lt;div className=&quot;row mt-3&quot;&gt;
                                  &lt;div className=&quot;col-12&quot;&gt;
                                      &lt;FormControl control='textarea' type='text' label='Connection String *' placeholder='Enter Connection String' rows='3' name='detail.blobDetail.connection'
                                          variant={formik.touched.detail &amp;&amp; formik.errors.detail &amp;&amp; formik.touched.detail.blobDetail.connectionString &amp;&amp; formik.errors.detail.blobDetail.connectionString ? 'mnd-danger' : ''} /&gt;
                                  &lt;/div&gt;
                                  &lt;div className=&quot;col-12&quot;&gt;
                                      &lt;FormControl control='select' label='Access *' placeholder='Select Access' name='detail.blobDetail.access' options={accessOptions}
                                          value={getAccessTierValue(formik.values.detail.blobDetail.accessTier)} onChange={e =&gt; handleAccessTierSelect(e, formik.setFieldValue)} onBlur={() =&gt; handleAccessTierBlur(formik.setFieldTouched)}
                                          outlineDanger={formik.touched.detail &amp;&amp; formik.errors.detail &amp;&amp; formik.touched.detail.blobDetail.access &amp;&amp; formik.errors.detail.blobDetail.access? 'mnd-danger' : ''} /&gt;
                                  &lt;/div&gt;
                              &lt;/div&gt;
                              &lt;hr /&gt;
                          &lt;/&gt;}
                          &lt;div className=&quot;btn-toolbar float-right&quot; role=&quot;toolbar&quot;&gt;
                              &lt;div className=&quot;btn-group mr-2&quot; role=&quot;group&quot;&gt;
                                  &lt;Button variant='outline' onClick={() =&gt; handleCancel()}&gt;Cancel&lt;/Button&gt;
                              &lt;/div&gt;
                              &lt;div className=&quot;btn-group mr-2&quot; role=&quot;group&quot;&gt;
                                  {type === 'createSourceButton' &amp;&amp; &lt;Button type='reset' onClick={() =&gt; resetForm()}&gt;Reset&lt;/Button&gt;}
                              &lt;/div&gt;
                              &lt;div className=&quot;btn-group&quot; role=&quot;group&quot;&gt;
                                  &lt;Button type='submit' disabled={!formik.isValid} onSubmit={() =&gt; onSubmit()}&gt;
                                      {type === 'createSourceButton' ? 'Create' : 'Update'}
                                  &lt;/Button&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/Form&gt;
                  )
              }}
          &lt;/Formik&gt;
  </code></pre>
  <p>Everything is working fine during the source creation scenario, but the update button is being disabled and if I check the formik errors, it says name and type are required fields even if their respective values are being populated correctly in the UI.</p>