Form handling without Controller, react-hook-form - react-hook-form

Question

I have been working on form using the react-hook-form for quite a long, I have used v6 and v7 of the library.
While handling form for material-ui, react-hook-form docs states that we should use Controller Component, link for the doc.
When using the Controller we have to write a lot of code which I personally don't like, so I have been using a different approach to handle form using watch, without using Controller Component.
Till now I have not faced any issues using this approach and I have to write less code as well.
I just wanted to know the drawbacks of this approach, as I don't want to change my code in future because of performance issues.
import { Button, Container, FormLabel, Grid, MenuItem, Select } from '#mui/material'
import { useForm } from 'react-hook-form'
export default function Home() {
const countries = [
{ id: 1, name: 'India' },
{ id: 2, name: 'USA' },
{ id: 3, name: 'Canada' }
]
const { register, handleSubmit, control, watch } = useForm({
defaultValues: {
country: 'India'
}
})
const watchFields = watch()
const submit = (data) => {
console.log({ data })
}
return (
<Container sx={{ marginTop: '10px' }}>
<form onSubmit={handleSubmit(submit)}>
<Grid item xs={6}>
<FormLabel>Please select your country</FormLabel>
<Select
fullWidth
defaultValue={'India'}
value={watchFields.country}
label="Country"
{...register('country')}
>
{countries.map(country => <MenuItem key={country.id} value={country.name}>{country.name}</MenuItem>)}
</Select>
</Grid>
<Button type='submit'>Submit</Button>
</form>
</Container>
)
}