formの入力内容を保持する方法がわかりません。

実現したいこと

react-hook-formで作ったフォーム画面に確認ダイアログを追加する。

前提

もともと入力フォーム画面を作っていましたが、submitしたときに、処理を行う最終確認ができるようにしたいと思い、
確認ダイアログ的なものを追加することにしました。

発生している問題・エラーメッセージ

確認ダイアログを別コンポーネントで作成し、投稿ボタンを押したときにそれを呼び出すようにしました。
しかし、この方法ですと、①確認ダイアログ表示→②登録処理を行う。
という感じで別の機能をまたぐ形となり、この場合にフォームの入力内容をどう保持したらいいか知りたいです。
①の時点ではデータを持ってますが、②に行くときにデータがなくなっちゃいます。

どんな感じでデータを次々に受け渡しをやってけばいいのかがわかりません。

仕様が守られてればなんでもいいので、別の方法で実現可能でしたら教えてください。

該当のソースコード

Form.tsx
1import React, { useState } from 'react';
2import { useForm } from 'react-hook-form';
3
4import { Doregist } from '../../api/users';
5
6import Confirm from '../../Confirm';
7
8
9  export const Form = () => {
10    const [confirm, setConfirm] = useState(false);
11    const [formdata, setformData] = useState<Params>()
12
13    const { register, handleSubmit  } = useForm<Params>();
14  
15    const openConfirm = (data: Params) => {
16/*ここの時点では、dataに情報がある。これをonsubmitにも引き継ぎたい。*/
17      setFormData(data);
18      setConfirm(true)
19    }
20
21    const onSubmit = async(data: Params) =>{
22        const res = await Doregist(data)
23    }
24
25    return(
26      <div>
27
28        <Confirm
29          msg="登録しますか？"
30          isOpen={confirm}
31          doYes={onSubmit}
32          doNo={() => {setConfirm(false)}}
33        />
34
35        <form onSubmit={handleSubmit(openConfirm)}>
36
37          <p>name</p>
38          <input id="name" {...register('name')} />
39
40          <button className="btn" type="submit">EDIT!</button>
41        </form>
42
43      </div>
44    )
45  }
46
47export default Form;

Confirm
1import React, { useState, useEffect  } from 'react';
2import Button from '@mui/material/Button';
3import Dialog from '@mui/material/Dialog';
4import DialogActions from '@mui/material/DialogActions';
5import DialogContent from '@mui/material/DialogContent';
6
7interface ConfirmProps {
8  msg: string
9  isOpen: boolean
10  doYes: Function
11  doNo: Function
12}
13
14  export const Confirm = ({ msg, isOpen, doYes, doNo }: ConfirmProps) => {
15
16    const [open, setOpen] = useState(false);
17
18    useEffect(() => {
19      setOpen(isOpen)
20    }, [isOpen])
21
22    return (
23      <div>
24        <Dialog
25            open={open}
26            keepMounted
27            onClose={() => doNo()}
28            aria-labelledby="common-dialog-title"
29            aria-describedby="common-dialog-description"
30        >
31          <DialogContent>
32            {msg}
33          </DialogContent>
34          <DialogActions>
35            <Button onClick={() => doNo()}>
36              No
37            </Button>
38            <Button onClick={() => doYes()}>
39              Yes
40            </Button>
41          </DialogActions>
42        </Dialog>
43      </div>
44    )
45  }
46
47export default Confirm