I am new to react and im trying to trigger my own custom dialog component on tab/window close event. I've checked everywhere and see that the usage of beforeunload is exactly what is needed to achieve this. However, when I add the beforeunload event listener, I see the browsers default leave site popup and only if I chose cancel on the dialog, then I see my custom dialog pop up appear. can someone help me to achieve this functionality?
No, this is not possible. For rather obvious reasons, a browser does not allow any webpage to prevent getting closed. The builtin dialog requestable via beforeunload is the best you will get, only this way the browser can guarantee that the dialog actually gives the user a choice to close the page.