reactjs - Ionic Modal内でreact-hook-formを使用するには?

Question

react-hook-formIonic React アプリケーションで使用しようとしています。私はこの単純なフォームを使用しています：

const Form: React.FC<{ color: string }> = ({ color }) => {
  const { handleSubmit, register } = useForm();

  const onSubmit = (data: any) => {
    console.log(`%c${JSON.stringify(data)}`, `color: ${color}`);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input ref={register} name="name" type="text" />
      <input ref={register} name="surname" type="text" />
      <input type="submit" />
    </form>
  );
};

IonModalこのコンポーネントはうまく機能していますが、コンポーネント内で使用しようとすると、onSubmitハンドラーに何も表示されません。

const App: React.FC = () => {
  const [showModal, setShowModal] = React.useState(false);

  return (
    <IonApp>
      <Form color="green" />
      <IonModal
        isOpen={showModal}
        onDidDismiss={() => setShowModal(false)}
        children={<Form color="red" />}
      />
      <IonButton onClick={() => setShowModal(true)}>Open Modal</IonButton>
    </IonApp>
  );
};

最初の を送信するFormと、データはコンソールに正しく出力されますが、IonModalコンポーネント内で 2 番目のものを送信するとそうではありません。 この動作を示す例を次に示します。