I have React Hook Form With Controller With Yup as validataro The Material UI Select stays red after selecting something and won't go away

I got TextField to work, now the Material UI Select will turn red if no selection is made but stays red after selection is made and won't let form submit. I'm using Yup as validation library.Maybe I keep using wrong Yup type I try String and array but I can't get it to work.

import {
  makeStyles,
  Box,
  Select,
  FormControl,
  InputLabel,
  MenuItem,
  Typography,
} from "@material-ui/core";
import * as yup from 'yup';
import { yupResolver } from '@hookform/resolvers'
import { useForm, Controller } from "react-hook-form";

const FormFields = ({ typeOfInquiry, typeOfProviderSupplier, feedbackform }) => {
 
  const schema = yup.object().shape({
   
   typeofInquiry: yup.array().nullable().required(),
  
  });
  const { handleSubmit, control, reset, errors } = useForm();

  return (
   
       <Controller
                  style={{ minWidth: 220 }}
                  name="typeofInquiry"
                  render ={({ field: {  ...field }, fieldState })=>{
                    console.log(props)

                 return  ( <Select  {...field} >
                     
                      {typeOfInquiry.map((person) => (
                        <MenuItem key={person.value} value={person.value} >
                          {person.label}
                        </MenuItem>
                      ))}
                    </Select>
                   )
                    }}
                  control={control}
                  defaultValue=" "

                /> 
                <Typography className={classes.red}>{errors.typeofInquiry?.message}</Typography>

              </FormControl>
    </form>
  );
}