title: Formik onChange is not working for dropdown using react-select
body: <p>Below is the code where I am trying to select value from dropdown.
  <strong>handleChange</strong> is not working, when I select the value from dropdown it's not getting updated with selected value from dropdown. It's getting vanished(blank).</p>
  <p>Dropdown values are getting populated when I select it's not catching the new selected value.</p>
  <p>Can someone help me on this like what I am missing here?</p>
  <pre><code>export const FormikSelectField = ({ label, ...props }) =&gt; {
    const [field, meta] = useField(props);
    const [isFocused, setOnFocus] = useState(false);
  
    const handleChange = (value) =&gt; {
      // this is going to call setFieldValue and manually update values.topcis
      console.log('Value in handlechange..', value ,'and', props.name);
      props.onChange(props.name, value.value);
    };
  
    const handleFocus = () =&gt; {
      setOnFocus(true);
    };
    const handleBlur = (e) =&gt; {
      // this is going to call setFieldTouched and manually update touched.topcis
      setOnFocus(false);
      props.onBlur(props.name, true);
      field.onBlur(e);
    };
    return (
      &lt;&gt;
        &lt;label htmlFor={props.labelName}&gt;{props.labelName} &lt;/label&gt;
        &lt;Select
          id={props.labelName}
          options={props.options}
          isMulti={false}
          onChange={handleChange}
          onBlur={(e) =&gt; handleBlur(e)}
          placeholder='Select an option'
          onFocus={handleFocus}
          value={props.value}
        /&gt;
        {meta.touched &amp;&amp; meta.error &amp;&amp; !isFocused ? (
          &lt;div className=&quot;error&quot;&gt;{meta.error}&lt;/div&gt;
        ) : null}
      &lt;/&gt;
    );
  };
  </code></pre>
  <pre><code> formikInitialValues = () =&gt; {
           return {
           Name: [{
                  title: '',
                  value: '',
                }]
           };         
      };
  
     YupValidationSchema = () =&gt; {
          return Yup.object({
      Name: Yup.array()
              .of(
                Yup.object().shape({
                  title: Yup.string().required(),
                  value: Yup.string().required(),
                })
              )
              .required(&quot;Please select an option&quot;)
              .nullable()
  
          });
        };
  </code></pre>
  <pre><code>&lt;FormikSelectField 
          value={this.state.selectNameOption}
          onChange={this.handleNameChange}
          onBlur={this.handleNameChangeBlur}
          error={formik.errors.Name}
          options={this.state.NameOptions}
          touched={formik.touched.Name}
          name=&quot;Name&quot;
          labelName=&quot;Name&quot;                             
    /&gt;
  </code></pre>