Issue with Service Worker Scope and React Navigation

I’m having trouble with my service worker’s scope when using React’s navigate() function. I am having two service worker one with default scope another one with the scope /app1/, app1 is not being applied correctly when navigating within the React app.

When I navigate to http://localhost:4000/app1/users using React’s navigate() function, the service worker with the scope /app1/ is not being triggered. However, direct navigation in the browser works as expected.

if ('serviceWorker' in navigator) {
  navigator.serviceWorker.register('./service-worker.js')
    .then(function(registration) {
      console.log('Service Worker registered with scope:', registration.scope);
    })
    .catch(function(error) {
      console.log('Service Worker registration failed:', error);
    });

    // Register the second service worker with a different scope
  navigator.serviceWorker.register('./service-worker1.js', { scope: '/app1/' })
  .then(function(registration) {
    registration.update();
    console.log('Another Service Worker registered with scope:', registration.scope);
  })
  .catch(function(error) {
    console.log('Another Service Worker registration failed:', error);
  });

React Navigation:

navigate('/app1/users');

Expected Behavior
The service worker with the scope /app1/ should handle requests to http://localhost:4000/grit/users when navigating using React’s navigate() function.

Actual Behavior
The service worker with the scope /app1/ is not being triggered when using React’s navigate() function, but works with direct browser navigation.