Is there a way to register custom components with useForm? - reactjs

Question

I am creating a web form using useForm(). This is my main component:
function InsertComponent() {
const [category, setCategory] = useState<number>(-1);
const { register, handleSubmit, control } = useForm({ shouldUnregister: false });
const onSubmit = (data: any, e: any) => {
console.log(control);
console.log(data, e);
}
const changeCategory = (category: number) => {
setCategory(category);
}
return (
<Container component={'main'} maxWidth={'xs'}>
<Box
sx={{
marginTop: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center'
}}
>
<Typography component={'h1'} variant={'h5'}>
Nuevo gasto
</Typography>
<Box component={'form'} noValidate sx={{ mt: 3 }} onSubmit={handleSubmit(onSubmit)}>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<TextField label={'Cantidad'} autoComplete="given-name" id="quantity" required fullWidth autoFocus {...register('quantity')}></TextField>
</Grid>
<Grid item xs={12} sm={6}>
<SelectComponent options={MONTHS} label={'Month'} />
</Grid>
<Button type="submit" style={{ marginTop: '20px' }} variant="outlined">Guardar</Button>
</Box>
</Box>
</Container>
)
}
I can register data with {...register('quantity')} in TextField and that works fine. The problem is I am not finding a way to register the options selected in the SelectComponent component. This is the component:
function SelectComponent(props: SelectCategory) {
const { options, label, onChange, disabled, control } = props;
const { show } = useWatch({ control })
const handleChangeCategory = (event: SelectChangeEvent) => {
onChange && onChange(parseInt(event.target.value))
}
return (
<Box sx={{ minWidth: 150 }}>
<FormControl fullWidth>
<InputLabel id="demo-simple-select-label">{label}</InputLabel>
<Select
labelId="demo-simple-select-label"
id="demo-simple-select"
disabled={disabled}
label={label}
onChange={handleChangeCategory}
>
{options.map((option, index) => <MenuItem value={index}>{option}</MenuItem>)}
</Select>
</FormControl>
</Box>
)
}
I've been reading the docs and trying npm libraries like useStateMachine but I haven't gotten it to work. The value of SelectComponent is never registered on the InsertComponent and never appears in the data of the onSubmit function.