Trying to serve multiple React apps with nest.js. BrowserRouter not working

Question

I'm trying to serve 3 different React apps through nest.js. The folder structure is as follows:

• game/backend/src/main.ts (where app.use routes are defined)
• game/master-app/build/index.html + static folder
• game/score-app/build/index.html + static folder
• game/team-app/build/index.html + static folder

When i use npm start on the apps the BrowserRouter works:

<Router>
      <Routes>
        <Route path="/" element={<Home/>} />
        <Route path="/login" element={<SignIn />} />
      </Routes>
    </Router>

But when i try to serve them using nest.js it just gives me a white screen.

Using this:

ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', '..', 'master-app', 'build'),
      serveRoot: '/master-app',
    }),
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', '..', 'score-app', 'build'),
      serveRoot: '/score-app',
    }),
    ServeStaticModule.forRoot({
      rootPath: join(__dirname, '..', '..', 'team-app', 'build'),
      serveRoot: '/team-app',
    }),

inside Nest only gave me the React app when i wasn't using the BrowserRouter. So then i tried this:

app.use('/master-app', express.static(join(__dirname, '..', '..', 'master-app', 'build')));
  app.use('/score-app', express.static(join(__dirname, '..', '..', 'score-app', 'build')));
  app.use('/team-app', express.static(join(__dirname, '..', '..', 'team-app', 'build')));

  app.use('/master-app/*', (req, res) => {
    res.sendFile(join(__dirname, '..', '..', 'master-app', 'build', 'index.html'));
  });

  app.use('/score-app/*', (req, res) => {
    res.sendFile(join(__dirname, '..', '..', 'score-app', 'build', 'index.html'));
  });

  app.use('/team-app/*', (req, res) => {
    res.sendFile(join(__dirname, '..', '..', 'team-app', 'build', 'index.html'));
  });

But it seems to give me the wrong index.html. It seems i need the chunks within the static folder?? I'm really new to this. If I can add additional info please ask.