React useForm errors is undefined

Following the documentation using yup & react-hook-form for validation.

const schema = yup.object().shape({
    password: yup.string().required(),
    confirm_password: yup.string().required(),
});

const {
    register,
    handleSubmit,
    formState: { errors },
    reset,
} = useForm({ resolver: yupResolver(schema) });

My problem is in VSC I'm getting an error with "errors". Here is my code:

<div>
    <Form.Control {...register('password')} name="password" type="password" placeholder="Enter New Password" />
</div>
<div className="is-flex-rowss">
    <small className="text-danger">{errors.password?.message}</small>
</div>

but errors.password?.message is giving me an error in VSC:

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

Note: The app does run as expected, even with these errors. I would just like to clear them out so my build doesn't have many errors.