controlled select material ui
const SelectComponent = ({defaultValue, name, label, errors, control, require, menuList, extraOption}) => {
return (
<Controller
defaultValue={defaultValue}
name={name}
control={control}
rules={{required: Boolean(require) ? true : false}}
render={({onChange, value, name}) => (
<Select
labelId="demo-simple-select-label23"
id="demo-simple-select23"
value={value}
name={name}
label={label}
error={(errors[name] ? true : false)}
onChange={ e => {onChange(e.target.value); }}
>
{
menuList.map((ele, index) => (
<MenuItem key={index} value={ele.id}>{`${ele.name}${extraOption ? "," + ele[extraOption] : ""}`}</MenuItem>
))
}
</Select>)}
/>
)
}