title: How to use Formik to get Values from Material UI Select Fields
body: <p>Pardon me, i want to understand &amp; achieve something using <code>Formik</code>.</p>
  <p>I have two select fields and i want to pass their selected value to <code>formik</code> value. What they do basically is to get <code>CountryArray</code> and their corresponding regions. The reason i created them as a standalone component was, so i could pass them to the Field component in <code>Formik</code>. My countries Array is coming from
  <code>import countries from &quot;../data/c-r&quot;;</code>. I'm also using <code>useState</code> from <code>react</code>. But i know when using formik, you don't need to manage your state anymore, cus <code>Formik</code> does that. How can i achieve that.</p>
  <pre><code>  const [country, setCountry] = useState(&quot;&quot;);
    const [region, setRegion] = useState(&quot;&quot;);
  
    const CountryComponent = () =&gt; (
      &lt;FormControl&gt;
        &lt;InputLabel id=&quot;demo-simple-select-label&quot;&gt;Country&lt;/InputLabel&gt;
        &lt;Select
          labelId=&quot;demo-simple-select-label&quot;
          id=&quot;demo-simple-select&quot;
          value={country}
          onChange={handleChangeCountry}
        &gt;
          {countries.map(country =&gt; (
            &lt;MenuItem value={country} key={country.countryShortCode}&gt;
              {country.countryName}
            &lt;/MenuItem&gt;
          ))}
        &lt;/Select&gt;
      &lt;/FormControl&gt;
    );
  
    const StateComponent = () =&gt; (
      &lt;FormControl&gt;
        &lt;InputLabel id=&quot;demo-simple-select-label&quot;&gt;Region&lt;/InputLabel&gt;
        &lt;Select
          labelId=&quot;demo-simple-select-label&quot;
          id=&quot;demo-simple-select&quot;
          value={region}
          onChange={handleChangeRegion}
          disabled={!country}
        &gt;
          {country
            ? country.regions.map(region =&gt; (
                &lt;MenuItem value={region} key={region.shortCode}&gt;
                  {region.name}
                &lt;/MenuItem&gt;
              ))
            : []}
        &lt;/Select&gt;
      &lt;/FormControl&gt;
    );
  </code></pre>
  <p>Which i did...</p>
  <pre><code>&lt;Field
        type=&quot;select&quot;
        placeholder=&quot;State&quot;
        name=&quot;state&quot;
        as={StateComponent}
        fullWidth
        label=&quot;Select State&quot;
      /&gt;
  
     &lt;Field
       type=&quot;select&quot;
       placeholder=&quot;Country&quot;
       name=&quot;country&quot;
       as={CountryComponent}
       fullWidth
       label=&quot;Select Country&quot;
     /&gt;
  </code></pre>
  <p>The Problem is i can't get the values of both region and country in the Formik Value, how can i do that?</p>
  <p>Thank you!</p>