I am quite new to React and facing the following challenge.

Current state: I have a react application which upon pressing page refresh or back button, triggers an uploaded document to be saved even before I click on the Save document button.

Expected: What I want is to press upload button, document uploads, 'Save document' button appears, then press refresh or back button, page refreshes but does not save the document.

I'm new to debugging using DevTools but I have an idea after following this tutorial. Also read through these issues

1. Detect Back/Next/Refresh BUTTON click on Chrome
2. How to use event listener on chrome dev tool for page load

Using Event Listener Breakpoints, I've selected Mouse -> click and Load -> load but this hasn't helped me identify why this is happening.

How can I fix this?

Browser version: Chrome Version 101.0.4951.54 (Official Build) (64-bit)
OS: Windows 10 Enterprise