【React】react-hook-formで`errors`を参照時にundefinedになる

概要

react-hook-formは、Reactでそこそこ使用されているバリデーションのライブラリです。errorsは各入力項目でvalidateを設定して、それに適合しない場合はメッセージが入るような位置付けになっています。使い方の概要は、React Hook Formによるフォームバリデーションの記事を参照ください。
今回は、このerrorsのオブジェクトが、なぜか参照時にundefinedになってしまい少しハマったので、状況や対応方法などメモ書きします。

エラー時の状況など

今回使用したreact-hook-formのバージョンはv7になります。
react-nativeのアプリで、errorsは以下の通りに定義しました。

 const {
    handleSubmit,
    errors,
    formState,
    control,
  } = useForm({
    mode: "onChange",
  });

 return (
  <View>
    <Controller
     name="hour"
     control={control}
     rules={
       min: {
        value: 0,
        message: "0以上の数を入力してください",
       },
     }
     render={({ field: { onChange, value } }) => (
       <TextInput
         label="時間"
         placeholder="時間"
         style={styles.hour}
         keyboardType="numeric"
         onChangeText={(text) => onChange(text)}
         value={value}
        />
     )}
    />
   {errors.hour && (
     <View style={styles.error}>
   　  　　<Text style={styles.errorText}>
      　 　{errors.hour.message}
       </Text>
     </View>
   )}
　　 </View>
 );

原因

undefined errors object in react-hook-formの記事にある通り、v7からはerrorsはformStateの配下になりました。この事は、react-hook-formのmigrate-v6-to-v7のerrorsの項にも記載があります。

修正後

formStateからerrorsを参照すれば、基本的には問題ありません。

 const {
    handleSubmit,
    formState,
    control,
  } = useForm({
    mode: "onChange",
  });

 return (
  <View>
    <Controller
     name="hour"
     control={control}
     rules={
       min: {
        value: 0,
        message: "0以上の数を入力してください",
       },
     }
     render={({ field: { onChange, value } }) => (
       <TextInput
         label="時間"
         placeholder="時間"
         style={styles.hour}
         keyboardType="numeric"
         onChangeText={(text) => onChange(text)}
         value={value}
        />
     )}
    />
   {formState.errors.hour && (
     <View style={styles.error}>
   　  　　<Text style={styles.errorText}>
      　 　{formState.errors.hour.message}
       </Text>
     </View>
   )}
　　 </View>
 );