Material <Select> helperText does not work with react-hook-form and yup

Question

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:

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

Works correctly:

  <ValidatorForm onSubmit={handleSubmit(onSubmit)}>
        <div className="inputContainer">
          <TextField
            inputRef={register}
            id="outlined-basic"
            name="firstName"
            className="inputField"
            variant="outlined"
            label="First Name"
            error={!!errors.firstName}
            helperText={errors.firstName ? errors.firstName.message : ""}
          />
        </div>

Does not work correctly:

              <FormControl variant="outlined" className={classes.formControl}>
            <InputLabel ref={inputLabel} >
              Location
            </InputLabel>
            <Select
              inputRef={register}
              value={location}
              labelWidth={labelWidth}
              error={!!errors.location}
              helperText={errors.location ? errors.location.message : ""}
            >
              {items.map(item => (
                <MenuItem key={item.value} value={item.value}>
                  {item.label}
                </MenuItem>
              ))}
            </Select>
          </FormControl>

Answer 1

const Helper = ({ counter, maxLength, minLength, text }) => {
  const classes = useStyles()

  return (
    <div className={classes.helperText}>
      {text.length <= 0 ? (
        <div className={classes.adviceColor}>
          Write at least {minLength} characters.
        </div>
      ) : text.length < minLength ? (
        <div className={classes.adviceColor}>
          You have to write {minLength - counter} characters to send.
        </div>
      ) : text.length <= maxLength ? (
        <div
          className={
            text.length - minLength > maxLength / 2 - minLength
              ? classes.allowedHardColor
              : classes.allowedColor
          }
        >
          You can send or write {maxLength - counter} characters more.
        </div>
      ) : (
        <div className={classes.rejectColor}>
          Your description is too long to send by{' '}
          {Math.abs(maxLength - counter)} characters.
        </div>
      )}
    </div>
  )
}

Answer 2

import { InputLabel, FormHelperText, Select } from "@material-ui/core";
import { FormControl, MenuItem, Button } from "@material-ui/core";
import { useForm, Controller } from "react-hook-form";

function sample(props) {
  const { handleSubmit, errors, control, register } = useForm();
  const name = "fieldName";
  const [value, setValue] = useState(null);
  const handleChange = (selected) => {
    setValue(selected.target.value);
  };
  const onSubmit = (data) => {};
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <FormControl variant="filled" error={Boolean(errors[name])}>
        <InputLabel id={`labelId`}>{label || ""}</InputLabel>
        <Controller
          as={
            <Select labelId={`labelId`} value={value} >
              {options.map((item) => (
                <MenuItem value={item.id} key={item.id}>
                  {item.name}
                </MenuItem>
              ))}
            </Select>
          }
          name={`${name}`}
          rules={{ required: "field is required" }}
          control={control}
          defaultValue={{value}}
          valueName={value}
          variant="filled"
          onChange={([selected]) => {
            handleChange(selected);
            return selected;
          }}
        />
        <FormHelperText>Field is required</FormHelperText>
      </FormControl>
      <Button variant="contained" color="primary" type="submit">
        submit
      </Button>
    </form>
  );
}