【React Hook Form】Controllerの中でonChangeを使うときの注意点 #JavaScript

概要

以下の記事からその方法を教えてもらった。（ありがとうございます。）
ただ、一点注意点があって、解決に時間がかかったのでシェア。

プロパティの順番が大事

{...field}がonChangeの後に記載されていると動かなかった。
前に記載しないとダメ。

// これだと動かない。
<Controller
  control={control}
  name="email"
  render={({field}) => (
    <TextField
      onChange={(e) => {
        field.onChange(e)
        handleOnChange(e)
      }}
      {...field}
    />
  )}
/>

// これで動く
<Controller
  control={control}
  name="email"
  render={({field}) => (
    <TextField
      {...field}
      onChange={(e) => {
        field.onChange(e)
        handleOnChange(e)
      }}
    />
  )}
/>