Prompt user before leaving route or reload

usePrompt.tsx

import { useEffect, useRef } from 'react';
import { useHistory } from 'react-router-dom';

export const usePrompt = (when: boolean, message: string = 'Are you sure you want to quit without saving your changes?') => {
  const history = useHistory();

  const self = useRef(null);

  const onWindowOrTabClose = event => {
    if (!when) {
      return;
    }

    if (typeof event == 'undefined') {
      event = window.event;
    }

    if (event) {
      event.returnValue = message;
    }

    return message;
  };

  useEffect(() => {
    if (when) {
      self.current = history.block(message);
    } else {
      self.current = null;
    }

    window.addEventListener('beforeunload', onWindowOrTabClose);

    return () => {
      if (self.current) {
        self.current();
        self.current = null;
      }

      window.removeEventListener('beforeunload', onWindowOrTabClose);
    }
  }, [message, when]);
};

const App = () => {
   const formik = useFormik();

   usePrompt(formik.dirty, t('Are you sure you want to quit without saving your changes?'));
}

Hi, thanks for this hook. Saved my life at work!

I'm using a mod version: https://gist.github.com/Hfreitas/505d5820d26b1455d37e9ec1d0f0f413

Please, give me feedbacks.

Any update for react-router v6.4.1?