React Hook Forms How to pass the errors as a props using Typescript

I'm defining a useForm.

const { handleSubmit, control, errors } = useForm<{email: string}>();

Now I'm creating a seperate component that will the input and I'm going to pass the useForm props i created above.

This how that Components look like.

type Props<T> = {  name: FieldName<T>;  control: Control<T>;  errors: FieldErrors<T>;};const ControlTextInput = <T extends {}>({  name,  control,  errors,}: Props<T>) => {  return (<Controller    name={name}    control={control}    rules={{      required:'this is required',    }}    render={({ onChange }) => (<><TextInput                onChangeText={(text) => {                onChange(text);                }}            />            {/* Show my error here */}            {errors.email && (<Text style={{ color: "red" }}>                    {errors.email?.message}</Text>            )}</>    )}  />  );};

I want to use the component like this.

<ControlTextInput<AnyObject>                    name="email"                    errors={errors}                    control={control}                  />

I get this error when i hover over the errors.email