Confirmation box for the back button- ReactJs

I have used the following code for the confirmation box on browser back button click. I am using routing without hash.

window.history.pushState(null, null, window.location.pathname);
window.addEventListener("popstate", this.onBackButtonClick);

  onBackButtonClick = (event) => {
    debugger;
    event.preventDefault();
    this.goBackButtonHandler();
  };

 goBackButtonHandler = () => {
    if (this.state.isEditDirty) {
      this.setState({ showDirtyDialog: true });
    } else {
      window.history.back();
    }
  };

I am facing the following two scenarios

1. I am binding pushstate and popstate multiple times for text field dirty. So when I click on the browser back button, the history change but url is not changing.
2. When I bind only one time when user type in text field, the solution is working as expected. But first time the confirmation box is showing with prevention of go back. On the second time, even the confirmation box is showing the page loaded in the back.