title: Formik Chakra-ui select not using value
body: <p>I'm trying to submit a form with a drop down list. The issue is formik does not recognize the value from the options, not sure why or how to fix it.</p>
  <pre class="lang-js prettyprint-override"><code>const [value, setValue] = React.useState(&quot;&quot;);
  const handleChange = (event: React.ChangeEvent&lt;HTMLInputElement&gt;) =&gt; {
    setValue(event.target.value);
  };
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>&lt;Formik
      initialValues={{ ingredientId:&quot;&quot;, }}
      onSubmit={async (values, { setErrors }) =&gt; {
          console.log(values);
      }}
  &gt;
      {({ isSubmitting }) =&gt; (
          &lt;FormControl name=&quot;ingredientId&quot; id=&quot;ingredientId&quot;&gt;
              &lt;FormLabel&gt;Ingredient&lt;/FormLabel&gt;
              &lt;Select 
                 name=&quot;ingredientId&quot; 
                 id=&quot;ingredientId&quot; 
                 onChange={handleChange} 
                 value={value}
               &gt;
                  {ingredients!.map((ingredient: any) =&gt; {
                      return &lt;option value={ingredient.id} id=&quot;ingredientId&quot;&gt; 
                          {ingredient.name}
                      &lt;/option&gt;;
                  })}
              &lt;/Select&gt;
          &lt;/FormControl&gt;
          ...
      )}
  &lt;/Formik&gt;
  </code></pre>
  <p>Though the ingredientId is still null after the submition, any idea?</p>