title: Material <Select> helperText does not work with react-hook-form and yup
body: <p>I'm using yup to display error/helper text when a field is required. It works perfectly for text inputs, however when I attempt to use a select with an error message with yup, it does not render an my custom error message and prints this to the console:</p>
  
  <pre><code>Warning: React does not recognize the `helperText` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `helpertext` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
  in div (created by ForwardRef(InputBase))
  in ForwardRef(InputBase) (created by WithStyles(ForwardRef(InputBase)))
  in WithStyles(ForwardRef(InputBase)) (created by ForwardRef(OutlinedInput))
  in ForwardRef(OutlinedInput) (created by WithStyles(ForwardRef(OutlinedInput)))
  in WithStyles(ForwardRef(OutlinedInput)) (created by ForwardRef(Select))
  in ForwardRef(Select) (created by WithStyles(ForwardRef(Select)))
  in WithStyles(ForwardRef(Select)) (created by Employee)
  in div (created by ForwardRef(FormControl))
  in ForwardRef(FormControl) (created by WithStyles(ForwardRef(FormControl)))
  in WithStyles(ForwardRef(FormControl)) (created by Employee)
  in div (created by Employee)
  in form (created by ValidatorForm)
  in ValidatorForm (created by Employee)
  in div (created by ForwardRef(CardContent))
  in ForwardRef(CardContent) (created by WithStyles(ForwardRef(CardContent)))
  in WithStyles(ForwardRef(CardContent)) (created by Employee)
  in div (created by ForwardRef(Paper))
  in ForwardRef(Paper) (created by WithStyles(ForwardRef(Paper)))
  in WithStyles(ForwardRef(Paper)) (created by ForwardRef(Card))
  in ForwardRef(Card) (created by WithStyles(ForwardRef(Card)))
  in WithStyles(ForwardRef(Card)) (created by Employee)
  in Employee (created by Index)
  in ThemeProvider (created by Index)
  in div (created by Index)
  in Index (created by Context.Consumer)
  in Route (created by App)
  in Switch (created by App)
  in Router (created by BrowserRouter)
  in BrowserRouter (created by App)
  in App
  </code></pre>
  
  <p><p><strong>Works correctly:</strong></p>
  
  <pre><code>  &lt;ValidatorForm onSubmit={handleSubmit(onSubmit)}&gt;
          &lt;div className="inputContainer"&gt;
            &lt;TextField
              inputRef={register}
              id="outlined-basic"
              name="firstName"
              className="inputField"
              variant="outlined"
              label="First Name"
              error={!!errors.firstName}
              helperText={errors.firstName ? errors.firstName.message : ""}
            /&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p><strong>Does not work correctly:</strong></p>
  
  <pre><code>              &lt;FormControl variant="outlined" className={classes.formControl}&gt;
              &lt;InputLabel ref={inputLabel} &gt;
                Location
              &lt;/InputLabel&gt;
              &lt;Select
                inputRef={register}
                value={location}
                labelWidth={labelWidth}
                error={!!errors.location}
                helperText={errors.location ? errors.location.message : ""}
              &gt;
                {items.map(item =&gt; (
                  &lt;MenuItem key={item.value} value={item.value}&gt;
                    {item.label}
                  &lt;/MenuItem&gt;
                ))}
              &lt;/Select&gt;
            &lt;/FormControl&gt;
  </code></pre>