Response from http-proxy-middleware is not showing up properly [MIME-type] error

Question

I am working to host multiple (nodejs + react) applications at different ports. As proof of concept I want http://localhost:3000/project1 to load an application running on http://localhost:4000. I created a http-proxy-middleware that runs at http://localhost:3000. the proxy looks like this.

// Dependencies
const express = require('express');
const { createProxyMiddleware } = require('http-proxy-middleware');
// Config
const { routes } = require('./config.json');

const app = express();

for (const route of routes) {
    app.use(route.route,
        createProxyMiddleware({
            target: route.address,
            pathRewrite: {
                '^/project1': '/', // remove base path
              },
              connection:'keep-alive'
        })
    );
}

app.listen(3000, () => {
    console.log('Proxy listening on port 3000');
});

The config.json looks like this:

{
    "routes": [
      {
        "route": "/project1",
        "address": "http://localhost:4000"
      }
    ]
  }

The application running at port 4000 is production mode and the build folder exists. This is a portion of server.js

//-----
app.use(express.static(path.resolve(__dirname, "build")));
  app.get("*", (req, res) => {
      res.sendFile(path.resolve(__dirname,"build", "index.html"));
    });

const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`Server is running on port ${PORT}.`);
});

The application folder tree looks like this enter image description here

Now the issue is if I enter http://localhost:4000/ in the browser the application works perfectly fine and the pages load properly. but if I enter http://localhost:3000/project1, I see a blank page with correct title (application name). I see MIME and 404 errors if I inspect the page. see below. enter image description here

I have tried different things (changing build path). Sorry for making it a long read and I appreciate your help. Thanks.