Hey guys, whenever a user refreshes my Next.js app or tries to go to a different page/website, I want an popup message to appear warning them that they will lose their data/progress. I have tried using the beforeunload event listener with a useEffect hook but it didn't work. Here are some examples of what I've tried -

#1

useEffect(() => {
    window.beforeunload = function() {
        return true;
    };

    return () => {
        window.beforeunload = null;
    };
}, []);

#2

  useEffect(() => {
    const unloadCallback = (event) => {
      event.preventDefault();
      event.returnValue = "";
      return "";
    };

    window.addEventListener("beforeunload", unloadCallback);
    return () => window.removeEventListener("beforeunload", unloadCallback);
  }, []);

I am using the app directory. Anyone know how I can accomplish this? Thanks
EDIT - I get the popup when my inspect element is open