I want to create a confirmation modal before route changes in Next.js

I have code block like this

const onRouteChangeStart = React.useCallback(() => {
    if (formState.isDirty) {
      if (window.confirm('Confirmation message')) {
        return true;
      }
      NProgress.done();
      throw "Abort route change by user's confirmation.";
    }
  }, [formState.isDirty]);

  React.useEffect(() => {
    Router.events.on('routeChangeStart', onRouteChangeStart);

    return () => {
      Router.events.off('routeChangeStart', onRouteChangeStart);
    };
  }, [onRouteChangeStart]);

It works as I want but I want to add a Custom Confirmation Modal instead of Native Confirmation.

When I added, route changes did not stop. That's why I couldn't wait for the user response.

What can I do? Thank you for your responses.