React JS API calls to http://localhost:8000/index.php using axios not working after npm run build

Question

After performing npm run build on my app, I am not able to make requests to my PHP backend at port 8000. It works when I am running it via npm start, but it suddenly does not work when I serve the build folder using serve -s build.

I have confirmed that my backend server is working.

Here is my package.json file:

{
  "name": "name",
  "version": "0.1.0",
  "proxy": "http://localhost:8000/index.php",
  "homepage": ".",
  "dependencies": {
    "@material-ui/core": "^4.12.4",
    "@material-ui/icons": "^4.11.3",
    "@material-ui/lab": "^4.0.0-alpha.61",
    "@testing-library/jest-dom": "^5.16.4",
    "@testing-library/react": "^13.2.0",
    "@testing-library/user-event": "^13.5.0",
    "axios": "^0.27.2",
    "bootstrap": "^5.1.3",
    "http-proxy-middleware": "^2.0.6",
    "jquery": "^3.6.0",
    "material-ui-icons": "^1.0.0-beta.36",
    "qs": "^6.10.3",
    "react": "^18.1.0",
    "react-bootstrap": "^2.3.1",
    "react-dom": "^18.1.0",
    "react-hooks-global-state": "^1.0.2",
    "react-router-dom": "^6.3.0",
    "react-scripts": "5.0.1",
    "react-select": "^3.2.0",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 Chrome version",
      "last 1 Firefox version",
      "last 1 Safari version"
    ]
  }
}

Reverse proxy

const { createProxyMiddleware } = require("http-proxy-middleware");
module.exports = (app) => {
  app.use(
    createProxyMiddleware("/test", {
      target: "http://localhost:8000/index.php",
      changeOrigin: true,
    })
  );

  app.use(
    createProxyMiddleware("/login", {
      target: "http://localhost:8000/index.php",
      changeOrigin: true,
    })
  );

  app.use(
    createProxyMiddleware("/getAllRooms", {
      target: "http://localhost:8000/index.php",
      changeOrigin: true,
    })
  );
  app.use(
    createProxyMiddleware("/updateRoom", {
      target: "http://localhost:8000/index.php",
      changeOrigin: true,
    })
  );
  app.use(
    createProxyMiddleware("/AddNewRoom", {
      target: "http://localhost:8000/index.php",
      changeOrigin: true,
    })
  );
  app.use(
    createProxyMiddleware("/logout", {
      target: "http://localhost:8000/index.php",
      changeOrigin: true,
    })
  );
  app.use(
    createProxyMiddleware("/register", {
      target: "http://localhost:8000/index.php",
      changeOrigin: true,
    })
  );
};

Again it works on npm start, but not on npm run build.