TypeScript Error: TS2322 when displaying an error

[WeeHong]

Context

• node version: 18.6.0
• module version: 17.6.0
• environment (e.g. node, browser, native): node
• used with (e.g. hapi application, another framework, standalone, ...): React Hook Form
• any other relevant information:

How can we help?

I am getting a TypeScript error when writing errors.postalCode?.message on the page.

{errors?.postalCode && (
  <span className="pl-3 text-red-500 text-sm">
    {errors.postalCode?.message}
  </span>
)}

The IDE is prompting with the following error.

TS2322: Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>> | undefined' is not assignable to type 'ReactNode'.   Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>' is not assignable to type 'ReactNode'.     Type 'Merge<FieldError, FieldErrorsImpl<DeepRequired<any>>>' is missing the following properties from type 'ReactPortal': key, children, type, props  index.d.ts(1374, 9): The expected type comes from property 'children' which is declared here on type 'DetailedHTMLProps<HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>'

May I know how to rectify this issue?

[Marsup]

This looks like React Hook Form types, you might have better luck discussing it there.

[Marsup]

I'll close this for inactivity, reopen if you have more details.