URL doesn't change back after clicking cancel in history.block alert box if the page is refreshed before

I have 2 pages as follows:

<BrowserRouter>
  <Switch>
    <Route exact path="/" component={HomePage} />
    <Route exact path="/next" component={NextPage} />
  </Switch>
</BrowserRouter>

In the homepage, I have a link to nextpage using history.push('/next'). In nextpage, I have a textbox and also the following in componentWillUnmount:

this.unblock = this.props.history.block((location) => {
  if (this.state.isChangeUnsaved) {
    return 'Leave without saving?';
  }
  return true;
});

From the homepage, I clicked on the link to nextpage. In nextpage, I refreshed the page and then typed something in the textbox which changed this.state.isChangeUnsaved to true. Then I clicked on the browser back button and the 'Leave without saving?' alert box appeared. I noticed the url changed to '/'. When I clicked cancel in the alert box, the url remained as '/'. If I do the same scenario except refreshing the page, the url will change back to '/next' as expected when cancel is clicked. Why is this happening and how to fix this?