Confirmation before closing the browser tab or warn the user on unsaved changes using v6 ? | Remix | Page 1

Hi, all I am currently in a process of migrating from v5 to v6. I have a use case where in I want to show a confirmation before the user is trying to close a browser tab or warn the user about unsaved changes. When a user is in the process of filling out an application form and decides to drop out I want to warn him that the stored data will be lost, and for an existing user if he has already signed up and lands on the dashboard and wants to close the tab or wants to go back to a previous route which in this case is signup I want to prompt him to either logout or continue. Previously I was using CRA and react-router dom v5 and the following is the code that I used to achieve the above results:-

import React, { useEffect, useState } from "react";
import { Prompt } from "react-router-dom";

const useUnsavedUsageWarning = (
message = "Are you sure you want to discard changes?"
) => {
const [isDirty, setDirty] = useState(false);

useEffect(() => {
// Detecting browser closing
window.onbeforeunload = isDirty && (() => message);
return () => {
window.onbeforeunload = null;
};
}, [isDirty]);

const routerPrompt = <Prompt when={isDirty} message={message} />;

return [routerPrompt, () => setDirty(true), () => setDirty(false)];
};

export default useUnsavedUsageWarning;

Any help or suggestion is appreciated. Thank you.

#Confirmation before closing the browser tab or warn the user on unsaved changes using v6 ?