title: Value from Selector doesn't work with Formik and Yup validation
body: <p>There is a Create Company page where a user must introduce data in some fields which are validated by Formik and Yup in order to create an entry. All fields all required.</p>
  <p>The problem is with the fields which are not introduced by writing inside a input but are selected from a dropdown. No matter what is selected, the value is not used and the entry is not created saying that this field is required.</p>
  <p>This is the code:</p>
  <pre><code>import React from 'react';
  import { Formik, Form, Field } from 'formik';
  import { Input, Button, Select, Label, Grid } from 'semantic-ui-react';
  import * as Yup from 'yup';
  
  class CreateCompanyForm extends React.PureComponent {
    constructor(props) {
      super(props);
  
      this.state = {
        name: '',
        industry: '',
      };
    }
  
    handleSubmitCreate = e =&gt; {
      e.preventDefault();
      const { createCompany, getCompanies } = this.props;
      createCompany(this.state);
      this.setState({ redirectCreate: true });
      getCompanies(this.props.query);
    };
  
    render() {
      const industryOptions = [
        { text: 'Retail', value: 'Retail' },
        { text: 'Food', value: 'Food' },
      ];
  
      const initialValues = {
        name: '',
        industry: '',
      };
      const requiredErrorMessage = 'This field is required';
      const validationSchema = Yup.object({
        name: Yup.string().required(requiredErrorMessage),
        industry: Yup.string().required(requiredErrorMessage),
      });
      return (
        &lt;Layout create&gt;
          &lt;OneColumn&gt;
            &lt;div&gt;
              &lt;Button type=&quot;submit&quot; form=&quot;amazing&quot;&gt;
                Create company
              &lt;/Button&gt;
            &lt;/div&gt;
          &lt;/OneColumn&gt;
  
          &lt;Formik
            htmlFor=&quot;amazing&quot;
            initialValues={initialValues}
            validationSchema={validationSchema}
            onSubmit={values =&gt; this.handleSubmit(values)}&gt;
            {({ values, errors, touched, setValues }) =&gt; (
              &lt;Form id=&quot;amazing&quot;&gt;
                &lt;Grid columns={2}&gt;
                  &lt;Grid.Column&gt;
                    &lt;Label&gt;Company Name&lt;/Label&gt;
                    &lt;Field name=&quot;name&quot; as={Input} placeholder=&quot;Hello&quot; /&gt;
                    &lt;div&gt;{touched.name &amp;&amp; errors.name ? errors.name : null}&lt;/div&gt;
                  &lt;/Grid.Column&gt;
  
                  &lt;Grid.Column&gt;
                    &lt;Label&gt;Industry&lt;/Label&gt;
                    &lt;Field
                      name=&quot;industry&quot;
                      as={Select}
                      options={industryOptions}
                      placeholder=&quot;Food service&quot;
                    /&gt;
                    &lt;div className=&quot;add-fridge-error&quot;&gt;
                      {touched.industry &amp;&amp; errors.industry
                        ? errors.industry
                        : null}
                    &lt;/div&gt;
                  &lt;/Grid.Column&gt;
                &lt;/Grid&gt;
              &lt;/Form&gt;
            )}
          &lt;/Formik&gt;
        &lt;/Layout&gt;
      );
    }
  }
  </code></pre>
  <p>Any ideas why for <code>name</code> an Input it works fine but for <code>industry</code> which is a Select it doesn't?</p>