Не приходят данные из MUI компонента в React Hook Form

Только начал изучать реакт. В форму react hook form добавил компоненты из MUI. При отправке формы, данные из MUI компонентов не приходят, значения в этих полях undefined. С обычными инпутами всё нормально, внутри MUI компонентов тоже данные приходят.

Основной компонент

interface Props {
    updateBasic: (data: BasicInfoInt) => void;
}

export default function Basic({updateBasic}: Props) {
    const { register, handleSubmit, control } = useForm<BasicInfoInt>();
    const onSubmit = useCallback((formValues: BasicInfoInt) => {
        updateBasic(formValues);
    }, []);


    const selectTypes = {
        gender: 'gender',
        currency: 'currency',
    }

    return (
        <div>
            <form onSubmit={handleSubmit(onSubmit)}>                   
                <div className="form-group">
                    <div className="form-group">
                        <label>Birth date</label>
                        <Controller
                            control={control}
                            name="birthdate"
                            render={() => (
                               <MaterialUIPickers />
                            )}
                        />
                    </div>
                    <div className="form-group">
                        <label>Gender</label>
                        <Controller
                            control={control}
                            name="gender"
                            render={() => (
                                <BasicSelect type={selectTypes.gender} />
                            )}
                        />
                    </div>
                </div>
                <div className="form-group">
                    <div className="form-group">
                        <label>Currency</label>
                        <Controller
                            control={control}
                            name="currency"
                            render={() => (
                                <BasicSelect  type={selectTypes.currency}/>
                            )}
                        />
                    </div>
                </div>
                <button type="submit">Next</button>
            </form>
        </div>
}
    

На всякий случай еще Select компонент

type SelectProps = {
    type: string
}

export default function BasicSelect({type}: SelectProps) {
    const [value, setValue] = React.useState('');

    const handleChange = (event: SelectChangeEvent) => {
        setValue(event.target.value);
    };

    const getItems = (type: string) => {
        let props: SelectItem[] = [];
        let items = [];
        switch (type) {
            case 'gender': {
                props = GENDER;
                break;
            }
            case  'currency': {
                props = CURRENCY;
                break;
            }
            case 'edu': {
                break;
            }
        }
        for (let i = 0; i < props.length; i++) {
            items.push( <MenuItem key={i} value={props[i].value}>{props[i].text}</MenuItem> );
        }
        return items;
    }

    return (
        <Box sx={{ minWidth: 120 }}>
            <FormControl fullWidth>
                <InputLabel id="select-label"></InputLabel>
                <Select
                    labelId="select-label"
                    id="select"
                    value={value}
                    label="Value"
                    onChange={handleChange}
                >
                    { getItems(type) }
                </Select>
            </FormControl>
        </Box>
    );
}