eventListener("change") on Radio Buttons does not work when used with Browser's back button

Question

I've got Two radio buttons with same name, and based on the chosen one, I want to change the content of a h1 just below these buttons. All of these are wrapped inside a form which submits to a random page. The problem is, after submitting the form, when user goes back to the form-page using Browser's back button

1. The last selected radio button is Correctly selected!

2. But h1's text is not updated correctly( Rather it shows the default h1 text).

Here's My Code :

var option1 = document.querySelector("#option1");
var option2 = document.querySelector("#option2");
var heading = document.querySelector("h1");
option1.addEventListener("change", () => {
    heading.innerText = "Option One is Selected";
});
option2.addEventListener("change", () => {
    heading.innerText = "Option Two is Selected";
});

<form action="https://www.google.com" method="GET">
      <input type="radio" id="option1" name="options">
      <label for="option1">Option 1</label>
      
      <input type="radio" id="option2" name="options">
      <label for="option2">Option 2</label>
      
      <h1>Choose one of the above options</h1>
      <button>Submit Form</button>
    </form>

My Take on This :

It seemed like when DOM Content is reloaded using back button, the change event on the radio button isn't fired so I created a function to be called using window.onload, which finds which checkbox is selected and accordingly changes the contents of h1. At this point my javascript looked like this :

var option1 = document.querySelector("#option1");
var option2 = document.querySelector("#option2");
var heading = document.querySelector("h1");
var handleChange = () => {
    if(option1.checked){
        heading.innerText = "Option One is Selected";
    }else if(option2.checked){
        heading.innerText = "Option Two is Selected";
    }else{
        alert("None is Selected");
    }
}
option1.addEventListener("change", () => {
    heading.innerText = "Option One is Selected";
});
option2.addEventListener("change", () => {
    heading.innerText = "Option Two is Selected";
});

window.onload = handleChange;

Then it turned out that window.onload is called before the DOM is loaded, or atleast before the browser knows which option was selected previously because above script alerted : "None is Selected". This made me add DOMContentLoaded evenListener to the document, after which my javascript looked like:

var option1 = document.querySelector("#option1");
var option2 = document.querySelector("#option2");
var heading = document.querySelector("h1");

option1.addEventListener("change", () => {
    heading.innerText = "Option One is Selected";
});
option2.addEventListener("change", () => {
    heading.innerText = "Option Two is Selected";
});

document.addEventListener("DOMContentLoaded", () => {
    if(option1.checked){
        heading.innerText = "Option One is Selected";
    }else if(option2.checked){
        heading.innerText = "Option Two is Selected";
    }else{
        alert("None is Selected");
    }
})

This time, I didn't noticed any change in the execution. Lastly I also tried using the same code without any listeners :

var option1 = document.querySelector("#option1");
var option2 = document.querySelector("#option2");
var heading = document.querySelector("h1");

option1.addEventListener("change", () => {
    heading.innerText = "Option One is Selected";
});
option2.addEventListener("change", () => {
    heading.innerText = "Option Two is Selected";
});


if(option1.checked){
    heading.innerText = "Option One is Selected";
}else if(option2.checked){
    heading.innerText = "Option Two is Selected";
}

Still I have had no luck! Don't want to use jquery though..