React Hook FormでonChangeイベントが動かない場合の対処法

React Hook Formで郵便番号を入力した際に、都道府県と住所の項目を自動入力する仕組みを作っていましたが、郵便番号を入力する度に関数を呼び出していたonChangeイベントが発火しないことに気がつきました。
対処は簡単でしたが、思ったより沼ってしまったのでメモします。

onChangeイベントが動かない原因

下記が問題のコードですが、動かない原因は単純で、React Hook Formのregister関数の引数optionsでonChangeイベントがオーバーライドされているためでした。

function autoSetAddress(event: ChangeEvent<HTMLInputElement>) {
  // 省略
}

return (
  <input
    id="post-code"
    className=""
    type="text"
    autoComplete="postal-code"
    maxLength={7}
    placeholder="0000000"
    onChange={(event) => autoSetAddress(event)} // 呼び出されない
    {...register('post-code')}
  />
)

この質問を見つけるまで、別で発生していたエラーと関連づけて勘違いしていました。
https://stackoverflow.com/questions/66936135/react-hook-form-how-to-can-i-use-onchange-on-react-hook-form-version-7-0

対処法

最初からregisterのoption引数としてonChangeイベントを渡してやるのがベストプラクティスだと思いますが、

<input
  // 省略
  {...register('post-code', {
    onChange={(event) => autoSetAddress(event)}
  })}
/>

https://github.com/react-hook-form/react-hook-form/pull/5620#issue-921818172

コンポーネント化する都合で、onChangeイベントで内部的に呼び出しているautoSetAddress関数がコンポーネント側に移植できず、呼び出し元でしか動かせない処理なので、
register関数を呼び出した後にonChangeイベントを宣言するように、処理の順番を入れ替えてシンプルに対処しました。

<input
  // 省略
  {...register('post-code')}
  onChange={(event) => autoSetAddress(event)} // registerより後に
/>