Abort Controller does not cancel All the pending requests

In my project all the requests goes through a single fetch function. In that I am storing all the abort controller inside and global set. When the user swictches to another page I will call the global set and abort all fetch requests that are waiting for response. If a response is received for a req I remove its controller from the set.

But the problem is not all requests are cancelled. When I try only a fraction of requests are getting cancelled.

Fetch Req-

 const controller = new AbortController();
            const request = { urlString, controller };
            requests.activeRequests.add(request);
            const signal = controller.signal;

            fetch(urlString, {
                headers: headers,
                method: method,
                signal: signal,
                body: payload ? JSON.stringify(payload) : undefined,
                credentials: 'include' 
            }).then(async (response) => {
                if (response.status === 200 || response.status === 204) {
                    requests.activeRequests.delete(request);

and this code is executed when user switches to other page

requests.activeRequests.forEach((req)=>{
                req.controller.abort();
                requests.activeRequests.delete(req)
            })

Can someone help me understand why only some requests are cancelled, What am i doing wrong?