Astro と react で react hook form の onSubmit が呼び出されない

背景

Astro で React を使ったフォームコンポーネントを作成していました。
バリデーションに React Hook Form を使っていて、 <form> の onSubmit に form.handleSubmit(onSubmit) を指定していましたが、submit ボタンを押すと onSubmit が呼び出されず、ページが更新されてしまっていました。

解決方法

Astro 側で React のフォームコンポーネントを呼び出すときに client:only ディレクティブをつける。

<FormComponent client:only>

補足

shadcn/ui の <Form> を使っていたり、 React Hook Form を使っていたりでどこに原因があるのか調べるのに時間がかかりましたが、client ディレクティブがなかったために javascript が読み込まれないという凡ミスでした。
（React も shadcn/ui も React Hook Form も関係ない）

参考

• Page refreshes after submitting form #1758