React SetState not updating after axios call when component is unmounted

When the ‘Show Report’ button is clicked 1) showReport function is called 2) ReportLoadingPanel shows 3) axios api is triggered 3) when the api finishes, ReportLoadingPanel disappears.

This works when I stay on this page. However, when I switch to another tab and come back while the api is processing, setLoading(false) is never triggered. Loading is set to true from the stored session and this doesn’t set loading back to false so ReportLoadingPanel is showing forever even the api finishes.

How can I fix this?

const [loading, setLoading] = useState(false);

useEffect(() => {
  setLoading(!!window.sessionStorage.getItem("isButtonDisabled");
}, []);

useEffect(() => {
   console.log(loading);
}, [loading]);

const showReport = () => {
  setLoading(true);
  window.sessionStorage.setItem("isButtonDisabled", true);
  return axios({
    url: 'api/report/getdata',
    method: 'GET',
    responseType: 'blob'
  }).then(() => {
    window.sessionStorage.setItem("isButtonDisabled", false);
    setLoading(false);
  });
};    

return (
  <>
    {loading && <ReportLoadingPanel/>}
    <button onClick={showReport} disabled={loading}>Show Report</button>
  </>
);