SessionStorage values get overwritten on reload instead of persisting
I'm trying to update my default active tab state with the value stored in SessionStorage in order for the state to persist Currently the state is coming from the prop defaultLayout. const [activeButton, setActiveButton] = useState(defaultLayout); This is the method I implemented to store the active tabs to SessionStorage while making the sessionStorage item names unique to the 3 widgets being displayed(top left, top right, and bottom left widget) const handleActiveButton = (activeBtn) => { if (alertTypeId) { if (left && top) { window.sessionStorage.setItem(`ACTIVE_TAB_TOP_LEFT_${alertTypeId}`, activeBtn); let getActiveButton = window.sessionStorage.getItem(`ACTIVE_TAB_TOP_LEFT_${alertTypeId}`); if (getActiveButton) { setActiveButton(getActiveButton); } else { window.sessionStorage.setItem(`ACTIVE_TAB_TOP_LEFT_${alertTypeId}`, activeBtn); getActiveButton = window.sessionStorage.getItem(`ACTIVE_TAB_TOP_LEFT_${alertTypeId}`); setActiveButton(getActiveButton); } } if (!left && top) { window.sessionStorage.setItem(`ACTIVE_TAB_TOP_RIGHT_${alertTypeId}`, activeBtn); let getActiveButton = window.sessionStorage.getItem(`ACTIVE_TAB_TOP_RIGHT_${alertTypeId}`); if (getActiveButton) { setActiveButton(getActiveButton); } else { window.sessionStorage.setItem(`ACTIVE_TAB_TOP_RIGHT_${alertTypeId}`, activeBtn); getActiveButton = window.sessionStorage.getItem(`ACTIVE_TAB_TOP_RIGHT_${alertTypeId}`); setActiveButton(getActiveButton); } } if (left && !top) { window.sessionStorage.setItem(`ACTIVE_TAB_BOTTOM_LEFT_${alertTypeId}`, activeBtn); let getActiveButton = window.sessionStorage.getItem(`ACTIVE_TAB_BOTTOM_LEFT_${alertTypeId}`); if (getActiveButton) { setActiveButton(getActiveButton); } else { window.sessionStorage.setItem(`ACTIVE_TAB_BOTT