Errors not working with react-select types

[jpsantos7]

Hey guys,

I created this reusable components using react-hook-form:

stackblitz example

The thing is I'm getting this error on the errors property for the react-select component (form-dropdown.tsx and dropdown.tsx):

Type 'FieldErrors<RegistrationFormFields>' is not assignable to type 'Partial<{ firstName: FieldError; lastName: FieldError; email: FieldError; birthDate: FieldError; gender: { value: FieldError; label: FieldError; }; bio?: FieldError; }>'.

I've been trying to understand this error but can't quite understand why it's not working.
The form is working like a charm though, it's really a matter of getting the types right to work for all the components.

Any help would be greatly appreciated 🙏