react hook form - error 타입 오류 Type 'FieldError' is not assignable to type 'ReactNode'.

🎀 문제 상황

export const LoginForm = () => {
  const {
    register,
    formState: { errors },
    handleSubmit,
  } = useForm({ mode: 'onBlur', shouldFocusError: true });

  ...

  return (
    <CommonInput
      id='email'
      inputType='email'
      placeholder='이메일을 입력해 주세요.'
      errorMessage={errors.email?.message}
      {...register('email', {
        pattern: {
          value: /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,4}$/,
          message: '올바른 이메일 주소가 아닙니다.',
        },
        required: {
          value: true,
          message: '이메일을 입력해 주세요.',
        },
      })}
    />
  )
}

errors.email?.message를 props로 자식 컴포넌트에 내려보내주고 있다.

Type 'FieldError' is not assignable to type 'ReactNode'.

그런데 타입이 일치하지 않다는 오류가 났다.

🎀 해결 방법

FeildError 타입을 ReactNode 타입으로 변환시켜 주면 해결 되었다.

errorMessage={errors.email?.message?.toString()}