window.stop() in componentWillUnmount() cancels the requests made in componentWillMount() for components that are not yet mounted

Question

I have problems cancelling pending requests on my React application. I am trying to use window.stop() in the following way:

I have enqueued the following list of requests:

What I want is to cancel the pending requests when I exit from that page but not the new ones that are made by the new component. For that, I found window.stop() method which cancels all the pending requests, so I try to execute on componentWillUnmount():

  componentWillUnmount() {
    window.stop();
  }

However, if the next mounted component executes another request in componentWillMount(), this is cancelled too, which I want to avoid:

The execution flow is as follows:

1. I go to page1 and this enqueue and execute all the paginated requests of the image 1.
2. Before all requests are finished, I go to page2 using useNavigate() and some click event.
3. The componentWillMount() of page2 is executed and makes the new request projects/.
4. The componentWillUnmount() of page1 is executed and all the pending requests are cancelled, including the new one made by page2.

I create this minimal reproducible example. The specified behaviour happens when I am in page1 waiting for the responses off the three requests and I move to page 2 by clicking the button. You can see how all the requests, including the new one of the page2, are cancelled CodeSandbox

In our code, we are doing neccesary requests of the different pages in componentWillMount() that as I know, is executed before componentWillUnmount() which is the reason for this behaviour. My question is: I have to change all the componentWillMount() of my code with componentDidMount() if I want to cancel all the request except the new ones that are made when the new component is mounted? Or is there another way to implement this?

Thanks you in advance!