MUI v5 とReact Hook Form v7 を連携させる際の設計と実装例の紹介

現在のプロジェクトでMUIとReact Hook Form（以下RHF）を組み合わせてフォームを実装しています。しかし、フォームコンポーネントの設計に関して何もルールが整備されておらず、実装が複雑になっていました。そのため、メンテナンスがしづらかったり、汎用的に使いづらい状態でした。そこで、フォームコンポーネントの設計の見直しを行なった結果、いい感じの設計ができたので、今回はその設計と実装例を紹介したいと思います！ 制御コンポーネントと非制御コンポーネント Reactには制御コンポーネントと非制御コンポーネントの2つのタイプが存在します。制御コンポーネントは、フォームの入力値や状態をReactコンポーネント自体で管理します。一方、非制御コンポーネントは、フォームの入力値や状態をDOM要素自体が管理します。 RHFを使用する場合、通常はregisterを使用して非制御コンポーネントとして扱い