title: React-select with Formik not updating select field but does everything else
body: <p>React-Select with Formik is not loading the selected value in select componenet but I'm able to get values on form submission and validation also works with Yup</p>
  
  <p>Here is a codesandbox demo for the same - <a href="https://codesandbox.io/s/wild-violet-fr9re" rel="noreferrer">https://codesandbox.io/s/wild-violet-fr9re</a></p>
  
  <p><a href="https://codesandbox.io/embed/wild-violet-fr9re?fontsize=14" rel="noreferrer">https://codesandbox.io/embed/wild-violet-fr9re?fontsize=14</a></p>
  
  <pre class="lang-js prettyprint-override"><code>import React, { Component } from "react";
  import { Formik, Form, ErrorMessage } from "formik";
  import * as Yup from "yup";
  import Select from "react-select";
  
  const debug = true;
  
  class SelectForm extends Component {
    constructor(props) {
      super(props);
      this.state = {
        stateList: [],
        stateCity: "",
        selectedState: "",
        citiesToLoad: []
      };
    }
  
    handleState(opt) {
      console.log(opt.value);
      let citiesList = [];
      Object.keys(this.state.stateCity).forEach(key =&gt; {
        if (key === opt.value) {
          this.state.stateCity[key].map((cityName, j) =&gt; {
            citiesList.push(cityName);
          });
        }
      });
      this.setState({
        selectedState: opt.value,
        citiesToLoad: citiesList
      });
    }
  
    handleMyCity(opt) {
      console.log(opt.value);
    }
  
    componentDidMount() {
      let stateLi = [];
      fetch(`stateCity.json`)
        .then(response =&gt; {
          console.log(response);
          return response.json();
        })
        .then(data =&gt; {
          console.log(data);
          for (let key in data) {
            if (data.hasOwnProperty(key)) {
              stateLi.push(key);
            }
          }
          this.setState({ stateCity: data, stateList: stateLi });
        })
        .catch(err =&gt; {
          console.log("Error Reading data " + err); // Do something for error here
        });
    }
  
    render() {
      const { selectedState, stateList, citiesToLoad } = this.state;
      const newStateList = stateList.map(item =&gt; ({ label: item, value: item }));
      const newCitiesToLoad = citiesToLoad.map(item =&gt; ({
        label: item,
        value: item
      }));
      return (
        &lt;div id="signupContainer" className="signinup-container"&gt;
          &lt;h3 className="mb-4"&gt; Sign Up &lt;/h3&gt;
          &lt;Formik
            initialValues={{
              state: selectedState,
              city: ""
            }}
            validationSchema={Yup.object().shape({
              state: Yup.string().required("Please select state."),
              city: Yup.string().required("Please select city.")
            })}
            onSubmit={(values, { resetForm, setErrors, setSubmitting }) =&gt; {
              setTimeout(() =&gt; {
                console.log("Getting form values - ", values);
                setSubmitting(false);
              }, 500);
            }}
            enableReinitialize={true}
          &gt;
            {props =&gt; {
              const {
                values,
                touched,
                dirty,
                errors,
                isSubmitting,
                handleChange,
                setFieldValue,
                setFieldTouched
              } = props;
  
              return (
                &lt;Form id="signUpForm" className="signinupForm" noValidate&gt;
                  &lt;div className="form-group"&gt;
                    &lt;label htmlFor="state" className="form-label"&gt;
                      State
                    &lt;/label&gt;
                    &lt;Select
                      name="state"
                      id="state"
                      onBlur={() =&gt; setFieldTouched("state", true)}
                      value={values.state}
                      onChange={(opt, e) =&gt; {
                        this.handleState(opt);
                        handleChange(e);
                        setFieldValue("state", opt.value);
                      }}
                      options={newStateList}
                      error={errors.state}
                      touched={touched.state}
                    /&gt;
                  &lt;/div&gt;
  
                  &lt;div className="form-group"&gt;
                    &lt;label htmlFor="city" className="form-label"&gt;
                      City
                    &lt;/label&gt;
                    &lt;Select
                      name="city"
                      id="city"
                      onBlur={() =&gt; setFieldTouched("city", true)}
                      value={values.city}
                      onChange={(opt, e) =&gt; {
                        this.handleMyCity(opt);
                        setFieldValue("city", opt.value);
                      }}
                      options={newCitiesToLoad}
                    /&gt;
  
                  &lt;/div&gt;
  
                  {isSubmitting ? (
                    &lt;span className="loader-gif"&gt;
                      &lt;img src={loading} alt="Loading..." /&gt;
                    &lt;/span&gt;
                  ) : null}
                  &lt;button
                    type="submit"
                    className="btn btn-filled"
                    disabled={!dirty || isSubmitting}
                  &gt;
                    Submit
                  &lt;/button&gt;
                  {/*Submit */}
  
  
                &lt;/Form&gt;
              );
            }}
          &lt;/Formik&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default SelectForm;
  </code></pre>
  
  <p>Upon selecting any value from the selecet dropdown, my selected value should appear in select box</p>