react app local storage is not setting up

• I am trying to build a react app where I can see notifications similar to stackoverflow.
• when I open two different tabs and open stackoverflow. I see notifications in two different tabs.
• but when I click that notification icon the numbers diappear.
• similarly in another tab also number disaapears without refreshing the page.
• I analysed the stackoverflow site by open in ie and chrome
• when I click reputation in chrome browser I see a network call happening and in IE browser without refreshing the numbers diappear.
• I see some values in local storage and session storage.
• is it possible to achive withot making api calls, for time being can we achieve using mock data
• I build the tab ui and redirect to the tab page
• so I google and found this link browser sessionStorage. share between tabs?
• used it in my react code, for some reason local storage is not setting up
• its going into this method anotherPage
• but storage key value is not adding.
• debugged by putting consoles, but its not printing anything inside window events.
• can you tell me how to fix it show that I can share the session between different links and tabs.
• providing my screenhot code snippet and sandbox below

repuation notifications scenario message notifications scenario

https://codesandbox.io/s/material-demo-j5ec5

demo.js

  anotherPage = () => {
    console.log("redictToStepper --->");
    this.props.history.push("/anotherPage");

    if (!event) {
      console.log("window --->");
      event = window.event;
    } // ie suq
    if (!event.newValue) return; // do nothing if no value to work with
    if (event.key == "getSessionStorage") {
      console.log("window --->");
      // another tab asked for the sessionStorage -> send it
      localStorage.setItem("sessionStorage", JSON.stringify(sessionStorage));
      // the other tab should now have it, so we're done with it.
      localStorage.removeItem("sessionStorage"); // <- could do short timeout as well.
    } else if (event.key == "sessionStorage" && !sessionStorage.length) {
      // another tab sent data <- get it
      var data = JSON.parse(event.newValue);
      for (var key in data) {
        sessionStorage.setItem(key, data[key]);
      }
    }

    //listen for changes to localStorage
    if (window.addEventListener) {
      console.log("window --->");
      window.addEventListener("storage", "xxx", false);
    } else {
      console.log("window --->");
      window.attachEvent("onstorage", "xxx");
    }

    // Ask other tabs for session storage (this is ONLY to trigger event)
    if (!sessionStorage.length) {
      localStorage.setItem("getSessionStorage", "foobar");
      localStorage.removeItem("getSessionStorage", "foobar");
    }
  };

pageOne.js

 render() {
    const {
      showSearchResults,
      searchText,
      typeAhead,
      typeAheadMode,
      canEdit,
      value
    } = this.state;

    const { classes } = this.props;

    return (
      <div className={classes.root}>
        <AppBar position="static" color="default">
          <Tabs
            value={value}
            onChange={this.handleChange}
            indicatorColor="primary"
            textColor="primary"
            variant="scrollable"
            scrollButtons="auto"
          >
            <Tab label="Radiobutton One" />
            <Tab label="checkbox Two" />
          </Tabs>
        </AppBar>
        {value === 0 && <TabContainer>Notification One</TabContainer>}
        {value === 1 && <TabContainer>Notification Two</TabContainer>}
      </div>
    );
  }

from react app local storage is not setting up