Next.js + Materialデザインで、簡単に確認ダイアログを実装する(material-ui-confirm)

$ yarn add material-ui-confirm

...省略
// 「ConfirmProvider」をインポートする。
import {ConfirmProvider} from 'material-ui-confirm';

...省略
    return (
        <ThemeProvider theme={theme}>
            {/* 「ConfirmProvider」を定義する */}
            <ConfirmProvider>
                <CssBaseline/>
                <Component {...pageProps} />
            </ConfirmProvider>
        </ThemeProvider>
    );

...省略
// 「useConfirm」をインポートする。
import {useConfirm} from 'material-ui-confirm';

...省略
const Home: NextPage = () => {
    // 確認ダイアログを定義する
    const confirmDialog = useConfirm();

    // 確認ダイアログを表示する
    const handleClick = () => {
        confirmDialog(
            title: '削除',
            description: '削除してよろしいでしょうか？',
            cancellationText: 'キャンセル'
        )
        .then(() => {
            // 「OK」ボタン押下時の処理
            
        })
        .catch(() => {
            // 「Cancel」ボタン押下時の処理

        });
    };

    // ボタン押下時に確認ダイアログを表示する
    return <Button onClick={handleClick}>Click</Button>;
}

confirmDialog({
            title: '削除完了',
            description: '削除完了しました。',
            hideCancelButton: true
        })
            .then(() => {
               // 「OK」押下時の処理

            });