Iframe : Reload back and forward Navigation

Question

I am having an Main application in web and I want to reload different iframe( hosted on different servers) based on the option he choses in main Application.When I am reloading the application the Since the iframe source is still the HomePage of iframe it loads the homePage For Solving that issue

import { useNavigate, useLocation } from 'react-router-dom';

type NavigateFunction = (path?: string) => void;

interface moduleStatePath {
  path : string;
  moduleName: string;
}
const CustomNavigate= () : NavigateFunction => {
  const navigate = useNavigate();
  const location = useLocation();



  const saveCurrentRoute = (currentPath: string) => {
    const path = window.location.href;
    console.log("path",JSON.stringify(path))
    window.parent.postMessage({ type: 'iframePath', value: path }, '*');
  };

  
  const navigateAndSave: NavigateFunction = (path) => {
    if(path){
      navigate(path);
      saveCurrentRoute(location.pathname); 
    }
  };
  
 

  return navigateAndSave;
};

export default CustomNavigate;

I wrote a wrapper of navigate which also sends a post message to parent and parent inturns saves in localStorage and it then load the iframe with source that we get from localStorage

const iframeUrl = localStorage.getItem("iframePath");
const src= iframeUrl ? iframeUrl : HOME_URL;
 <iframe ref={iframeRef} src={src} title='HOME'></iframe>

but it is hindering the backward and forward of browser why and how to fix it

Need an answer why following phenomenon is happening and how to fix it.