Next.js Multi Zone - Fast Refresh in Development Environment

I am currently using Next.js and multi zones for our web apps and I'm hitting an issue where webpackDevMiddleware only sees the current app I am on for changes. I use Docker to create my network. I'm hoping to change the scope to watch all apps in my workspace and refresh when any of them change.

My main issue is when I'm accessing app2 and make changes to app2, app1 doesn't see changes had been made to refresh the screen to update the view from app2.

I did verify if going directly to app2 and making a change, the page does refresh but I'd like developers to access the app1 and route to app2 from there. This will prevent them from needing to know what port (localhost:3000, localhost:3001, localhost:3002, etc.) to access for the right app.

Here is my next.config.js

const { APP2_URL } = process.env;

module.exports = {
   webpackDevMiddleware: (config) => {
      config.watchOptions = {
         poll: 1000,
         aggregateTimeout: 300,
      };

      return config;
   },
   output: "standalone",
   async rewrites() {
      return [
         {
            source: "/app1",
            destination: "/",
         },
         {
            source: "/app2",
            destination: `${APP2_URL}/app2`,
         },
         {
            source: "/app2/:path*",
            destination: `${APP2_URL}/app2/:path*`,
         },
      ];
   },
};

Each webapp is in it's own Docker container, so I'm guessing I need to add additional settings to watch the remote container for app2. Any guidance to get me started would be appreciated.