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