Can’t edit beforeunload event listener message in React

I have a react app and I want to prevent the user refresh the page and ask him if he is sure he wants to refresh the page.

This is my useEffect hook:

  useEffect(() => {

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

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

The main problem is that I can’t edit the default message of the modal that appears on refreshing the page and this event is triggered on closing the tab too.

How can I change the message and stop asking for confirmation on closing the tab or is there a way to add a custom modal from scratch instead using the browser modal?