How to dispatch an action on browser back button in React?

I have a Campaigns component that lists emails. Emails are stored in the app state using RTK. I also have the MailThread component that has a form & text editor to create and submit emails. What I want to do next is dispatching an action that marks the email as draft if the user goes back to the Campaigns component without submitting the email.I’m using react-router-dom for routing. So far I’ve tried this code in the MailThread component:

 const navigationType = useNavigationType();
   useEffect(() => {
     return () => {
       if (navigationType === NavigationType.Pop) {
        
         console.log("hello");
         
       }
     };
   });

The problem with this is that, it doesn’t work the first time I go back to Campaigns component. It only works the second time around: Campaigns –> EmailThread –> Campaigns – code doesn’t work. It only works when repeat the order.