How to display a confirmation dialog asking whether to discard the changes with react-router-dom v6

Expected result

After the user entered values in a form,
・display a confirmation dialog when attempting to reload a page.

・display a confirmation dialog when attempting to transition to another page.

Issue

react-router-dom v6 removes useBlocker, which is necessary to prevent page exits, and requires another implementation.

Reference
https://stackoverflow.com/questions/70617041/react-router-v6-doesnt-support-prompt-or-useprompt

Library I used

react-router-prompt
https://github.com/sshyam-gupta/react-router-prompt/tree/main

Actually, I copied and used only the three necessary files in this library.
https://github.com/sshyam-gupta/react-router-prompt/blob/main/src/hooks/use-confirm.ts
https://github.com/sshyam-gupta/react-router-prompt/blob/main/src/hooks/use-prompt.ts
https://github.com/sshyam-gupta/react-router-prompt/blob/main/src/index.tsx

The reason was that it was an unofficial react-router library and I didn't know if it would continue to be updated in the future.
I thought it would be usable just by porting the above three files, so I didn't use the library as it is this time. Instead, I ported the code and used it.

This is a repository I coded.
https://github.com/nobu0605/react-router-prompt

Of course, you can also use the library as it is.

How to use

Whether you use a library or create your own, you call ReactRouterPrompt as shown below and wrap the dialog etc.
Pass the change detection flag to when props.

import ReactRouterPrompt from "./ReactRouterPrompt";
import Button from "@mui/material/Button";
import Dialog from "@mui/material/Dialog";
import DialogActions from "@mui/material/DialogActions";
import DialogContent from "@mui/material/DialogContent";
import DialogContentText from "@mui/material/DialogContentText";
import DialogTitle from "@mui/material/DialogTitle";

type Props = {
  when: boolean;
};

export function UnsavedConfirmDialog({ when }: Props) {
  return (
    <ReactRouterPrompt when={when}>
      {({ isActive, onConfirm, onCancel }) =>
        isActive && (
          <Dialog open={isActive}>
            <DialogTitle>Do you really want to leave?</DialogTitle>
            <DialogContent>
              <DialogContentText>
                Your changes will not be saved.
              </DialogContentText>
            </DialogContent>
            <DialogActions>
              <Button onClick={onCancel}>cancell</Button>
              <Button onClick={onConfirm} autoFocus>
                ok
              </Button>
            </DialogActions>
          </Dialog>
        )
      }
    </ReactRouterPrompt>
  );
}

Complement

I used the beforeunload event to display a confirmation dialog when trying to reload a page, but it seems that custom messages or self-made dialogs cannot be displayed.
The default dialog for each browser will be displayed.
https://stackoverflow.com/questions/38879742/is-it-possible-to-display-a-custom-message-in-the-beforeunload-popup