コンポーネントの中の処理を外部関数化してモック化したい。

実現したいこと

reactでアプリを作成しております。
削除機能を実装しました。これをテストしたいのですが、
削除前にダイアログを表示し、ダイアログでユーザーが「はい」を押したときのみその先の削除処理が走るようにつくりました。
jestでは、削除ボタンを押す処理を実装しただけではダイアログが表示された段階で止まってしまい、削除処理実行されたかの確認が取れません。

そこで、このダイアログ自体をモックして、ダイアログが呼ばれたら「はい」が押されたということを必ず返すようにしたいと考えてます。

前提

モジュールや関数をモック化するのが一般的なやり方と思います。
そこで今回もモック化をするには、まずはダイアログ部分を切り出して外部関数にするなどが必要かと思いました。

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

現在の処理、仕様を維持したまま関数化するにはどのようにしたらいいでしょうか？

該当のソースコード

MyDialog.tsx
1import { Dialog, DialogTitle, DialogContent, DialogActions, DialogContentText, Button } from '@mui/material'
2
3export type MyDialogProps = {
4  onClose: (value: string) => void
5 title?: string
6 message?: string
7}
8
9export function MyDialog(props: MyDialogProps) {
10 const { onClose, title, message } = props
11
12 return (
13    <Dialog open onClose={() => onClose('close')}>
14     <DialogTitle>{title}</DialogTitle>
15     <DialogContent>
16       <DialogContentText>{message}</DialogContentText>
17     </DialogContent>
18     <DialogActions>
19        <Button onClick={() => onClose('ok')}>OK</Button>
20        <Button onClick={() => onClose('cancel')} autoFocus>
21         Cancel
22       </Button>
23     </DialogActions>
24   </Dialog>
25 )
26}

呼び出し側

App.tsx
1import React from 'react'
2import { MyDialog, MyDialogProps } from './MyDialog'
3
4export function App() {
5  const [modalConfig, setModalConfig] = React.useState<MyDialogProps | undefined>()
6
7 /**
8  * 削除ボタンクリック時の処理
9  */
10 const handleDeleteClick = async () => {
11/*以下の処理をモック化したい
12   const ret = await new Promise<string>((resolve) => {
13      setModalConfig({
14       onClose: resolve,
15       title: '削除します。よろしいですか?',
16       message: '削除すると二度と元に戻せません。'
17     })
18   })
19    setModalConfig(undefined)
20ここまでモック化対象*/
21
22/*上記をモック化することで、常にret ='ok'が返ってくるようにしたい。*/
23   if (ret === 'ok') {
24     console.log('削除する:OK時の処理を実行する')
25   }
26   if (ret === 'cancel') {
27     console.log('削除する:Cancel時の処理を実行する')
28   }
29 }
30
31 return (
32   <div className="App">
33     <button type="button" onClick={handleDeleteClick}>
34       Delete Confirm
35     </button>
36
37      {modalConfig && <MyDialog {...modalConfig} />}
38   </div>
39 )
40}