ｂ[react hook form] 複数のフォームで、特定のフィールドの値を常に同期させたい

次のようなコードがあるとします。

js
1function Form() {
2  const hookForm = useForm()
3
4  return (
5    <form>
6      a: <input type="text" {...hookForm.register("a")} />
7      b: <input type="text" {...hookForm.register("b")} />
8    </form>
9  )
10}
11
12function App() {
13  return (
14    <>
15      <Form />
16      <Form />
17    </>
18  )
19}

コードの説明をします。まず、Form コンポーネントが２つあります。そして、Form コンポーネントの子要素には a という input 要素と、b という input 要素があります。

このうち、a という input 要素の値は、２つの Form コンポーネントでつねに同じにしたいです。しかし、どのように実装すればよいかわかりませんでした。

どのように実装すればいいのかご教授いただけると助かります。

僕は最初、a という input 要素の値を保存するコンテクストを作成したあと、次のような処理を Form コンポーネントに追加しました。
・もし、フォームに更新があったら、コンテクストを更新する。
・もし、コンテクストに更新があったら、フォームを更新する。
しかし、この処理だと無限ループに陥ってしまいうまくいきませんでした。