【React】react-hook-formでcheckboxがsubmitされないことがあった

Safariのみ、react-hook-formでcheckboxのvaluteがsubmitされないケースがありました。

reactやSafariのバージョンは下記になります。

react：18.2.0
react-hook-form：7.37.0
Safari：16.0
macOS Monterey：12.6

実際のソースコードで見ていきます。

Submitされるパターン

import { useForm } from "react-hook-form";

const Sample = () => {
  const {
    register,
    handleSubmit,
  } = useForm()

  const onSubmit = (data: any) => {
    console.log(data)
  }


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="test">テスト</label>
      <input
        type="checkbox" 
        {...register("test")}
      />
      <input type="submit" />
    </form>
  );
}

export default Sample

特別なことはしていません。

submitボタンを押下すると、onSubmit関数でコンソールログを表示します。

チェックボックスがチェックされていればログには{test: true}と表示され、チェックされていなければ{test: false}と表示されます。

これはSafariでも問題ありません。

Submitされないパターン

import { useState } from "react";
import { useForm } from "react-hook-form";

const Sample = () => {
  const {
    register,
    handleSubmit,
  } = useForm()

  const onSubmit = (data: any) => {
    console.log(data)
  }


  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <label htmlFor="test">テスト</label>
      <input
        type="checkbox" 
        {...register("test")}
        onChange={(e) => {
          console.log(e.target.checked);
        }}
      />
      <input type="submit" />
    </form>
  );
}

export default Sample

問題なのはこちらです。

1つ目と違うのはcheckboxのonChangeを追加してコンソールログを出力しているだけなのですが、なぜかSafariだとチェックをした状態でsubmitボタンを押下すると{test: false}と表示されます。

Chromeだとチェックをした状態だと{test: true}と表示されます。

謎です。

どなたか、解決策をご存知の方がいらっしゃたらTwitterで教えてくださいm(-_-)m