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>
  )
}

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>
  );
}