React Hook Form & Material UI: errors are undefined - reactjs

Question

I'm using React Hook Form v7 with Material UI v5. I have a simple form component as shown below. I have marked the TextField as required, however, the error state and helper text are never shown when the value of the field is empty. The value of errors.title is always undefined.
What am I doing wrong here? How can I get the React Hook Form validation working, i.e. errors?
import React from 'react';
import Grid from '#mui/material/Grid';
import TextField from '#mui/material/TextField';
import Button from '#mui/material/Button';
import { useForm, Controller } from 'react-hook-form';
import backEndApi from '../api/backEndApi';
const UserForm = function () {
const { control, handleSubmit, formState: { errors }, getValues } = useForm();
const onFormSubmit = (event) => {
event.preventDefault();
backEndApi.post(getValues());
};
return (
<Grid container alignItems="center" justify="center" direction="column" paddingTop="10%">
<form onSubmit={handleSubmit(onFormSubmit)}>
<Grid container alignItems="center" justify="center" direction="column" spacing={5}>
<Grid item>
<Controller
name="title"
control={control}
rules={{ required: true }}
render={({ field }) => {
return (
<TextField
{...field}
id="title"
label="Title"
required
error={errors.title}
helperText={errors.title && 'Title is required'}
/>
);
}}
/>
</Grid>
<Grid item>
<Button id="job-submit" color="primary" type="submit" variant="contained">
Create Job
</Button>
</Grid>
</Grid>
</form>
</Grid>
);
};
export default UserForm;

Answer 1

I think rules conflicts with required of TextField.
I confirmed it works. (https://codesandbox.io/s/practical-chebyshev-9twrle?file=/src/userForm.js)
<Controller
name="title"
control={control}
rules={{ required: true }}
render={({ field }) => {
return (
<TextField
{...field}
id="title"
label="Title"
error={Boolean(errors.title)}
helperText={errors.title && "Title is required"}
/>
);
}}
/>
Also you don't have to wrap with Controller for such a simple case.
Example: https://codesandbox.io/s/practical-chebyshev-9twrle?file=/src/userFormWithoutController.js