バリデーションチェックと確認モーダル機能を持った、登録フォームを作成する(ReactHookForm + ChakraUI)

やりたいこと

値を入力
↓
入力に問題がある場合、バリデーションエラーを表示
↓
バリデーションチェックがOKな場合、「登録しますか？Yes No」のモーダルを表示
↓
Yesを押下時、モーダルを閉じて入力フォームをリセットする

実装

App.tsx

// Record型は「title:string, time:number」を持つ型を設定
const [records, setRecords] = useState<Record[]>([]); 
const [record, setRecord] = useState<Record>();

// ReactHookFormを利用するので、useForm()で呼び出す
const { register, handleSubmit, formState: {errors}, reset } = useForm();

// ChakraUIでモーダルを実装するので呼び出す
const { isOpen, onOpen, onClose } = useDisclosure();

/**
  * フォームから値を抽出する
  */
  const onSubmit = (record: Record) => {
    setRecord(record); // 
    onOpen(); // モーダルを展開する(ChakraUIの機能)
  }

  /**
   * 登録処理
   * 登録完了後、入力テキストを初期化する
   */
   const handlerRegister = () => {

    if (record) { // recordはundefined型の可能性があるため、undefined型の場合をはじく
      addRecord(record); // データ登録用の関数、詳細は省略
      onClose(); // モーダルを閉じる(ChakraUIの機能)
      reset(); // 入力をリセットする(ReactHookFormの機能)
    }
  }

  
<form onSubmit={handleSubmit(onSubmit)}>
    <Input {...register("title", { required: true })} />
    <Input {...register("time", { required: true })} />
    { errors.title && <p style={{ color: "red" }}>タイトルを入力してください</p> }
    { errors.time && <p style={{ color: "red" }}>数値を入力してください</p> } 
    <button type="submit">送信</button>
    <Modal isOpen={isOpen} onClose={onClose}> {/* モーダルを呼び出す */}
        <RecordModal onClose={onClose} record={record} onRegister={handlerRegister}/>
    </Modal>
  </form>

RecordModal.tsx

export function RecordModal ({ onClose, record, onRegister }) {
    return (
      <>
        <ModalOverlay /> {/* ChakraUIのオーバレイ表示 */}
          <ModalContent className="modal-content"> {/* ChakraUIのモーダル表示 */}
            <ModalBody>
              <div>この内容で登録しますか？</div>
              <div>title: {record.title}</div>
              <div>time: {record.time}</div>
            </ModalBody>
            <ModalFooter>
              <Button colorScheme='blue' mr={3} onClick={onClose}>
                Close
              </Button>
              {/* 登録を押下時、App.tsxの関数「handlerRegister」を実行する */}
              <Button variant='ghost' onClick={() => onRegister()}>登録</Button>
            </ModalFooter>
          </ModalContent>
      </>
    )
}

詰まっていたところ

モーダルで登録を押した後の処理を最初RecordModal.tsxの方で記載していて、処理を終了させたら良いかわからなかった。