Problems integrating react-hooks-forms with material ui - reactjs

Question

**Hello folks,
my problem is there are no error messages displayed even if nothing is inside. Anyone know what I did wrong? The code is in the attachment.Everything works except the message when nothing was selected in the autocomplete
.
.
.
Am I doing it wrong with the formprovider? Or should I better take the register method from the useForm - Methods? Or schould the text field itself have a controller?
**
const validationSchema = yup.object().shape({
selKategorie: yup.string().required("Select Validation Field is Required"),
}).required();
function Anlage(props) {
const { status, data, isError, isFetching } = useAnlegeData();
const [step, setStep] = React.useState(0);
const methods = useForm({
resolver: yupResolver(validationSchema),
});
const { handleSubmit, formState: { errors }, watch } = methods;
const labels = ['First Step', 'Secound Step', 'Confirmation'];
const handleSteps = (step) => {
switch (step) {
case 0:
return <FirstStep kategorien={data.Kategorie} methods={methods} />
case 1:
return <SecoundStep />
case 2:
return <Confirm />
default:
return <FirstStep />
}
}
return(
<>
<MyNavbar BACK={true}/>
{status.loading && <Loading /> }
<Container component="main" sx={{ mb: 4}}>
<Paper variant="outlined"
sx={{ my: { xs: 3, md: 6 }, p: { xs: 2, md: 3 } }}>
<Stepper activeStep={step} sx={{ py: 3 }} alternativeLabel>
{labels.map((label) => (
<Step key={label}>
<StepLabel>{label}</StepLabel>
</Step>
))}
</Stepper>
{status === 'success' &&
handleSteps(step)}
</Paper>
<p>{errors?.selKategorie?.message}</p>
</Container>
</>
)
}
export default function FirstStep(props) {
return(
<>
<FormProvider {...props.methods}>
<Grid container spacing={2}>
<Grid item xs={12} sm={6}>
<ControlledAutocomplete
name="selKategorie"
options={props.kategorien}
getOptionLabel={(option) => {
console.log('get option label: ',option);
return option.MASKENKEY; }
}
renderInput={(params) => <TextField {...params} label="Ticketkategorie" margin="normal" />}
defaultValue={null}
/>
</Grid>
</Grid>
<Box sx={{ display: 'flex', justifyContent: 'flex-end' }}>
<Button
variant="contained"
sx={{ mt: 3, ml: 1 }}
disabled={false}
color="primary"
onClick={() => null}
>
Next
</Button>
</Box>
</FormProvider>
</>
)
}
const ControlledAutocomplete = ({ options = [], renderInput, getOptionLabel, defaultValue, name}) => {
const { control, formState: { errors } } = useFormContext();
let isError = true;
let errorMessage = "";
if (errors && errors.hasOwnProperty(name)) {
isError = true;
errorMessage = errors[name].message;
}
return (
<Controller
render={({ field: { onChange } }) => (
<Autocomplete
options={options}
getOptionLabel={getOptionLabel}
//renderOption={renderOption}
renderInput={renderInput}
onChange={onChange}
/>
)}
onChange={([, data]) => {
return data
}}
name={name}
control={control}
defaultValue={defaultValue}
errorMessage={errorMessage}
error={isError}
/>
)
}