js and css files are not getting loaded in production environment. JS and CSS are loading index.html only . #4368

When i am hoisting application in local , things are working fine , but when i try to host the same in production environment , nothing is getting loaded . It is coming to index.html , but the js and css are not getting loaded.

Production URL is -> https://stg.abc.com/tools/forecaster.
Local URL -> http://localhost:8081/tools/forecaster

routes.js

import React from 'react'
import { BrowserRouter as Router, Route } from 'react-router-dom';
import login from './components/login';

const myTool = () => (
  <Router>
    <div>
      <Route exact path="/tools/forecaster" component={login}/>

      <Route exact path="/tools/forecaster_hs" component={login}/>

    </div>
  </Router>
)

export default myTool

server.js

const express = require("express");
const app = express();
const path = require('path');
const port = process.env.PORT || 8081 ;

app.use(express.static(path.join(__dirname, 'build')));

app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'public', 'index.html'));
});

app.listen(port);

The request is coming till index.html , but the js and css is not getting loaded. The js and css file , both are again loading index.html file in the browser.

Generated index.html which is getting loaded is

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no"><meta name="theme-color" content="#000000"><link rel="manifest" href="/manifest.json"><title>Partner's Commission Tool</title><link href="/static/css/main.9e6bed86.css" rel="stylesheet"></head><body><noscript>You need to enable JavaScript to run this app.</noscript><div id="root"></div><script type="text/javascript" src="/static/js/main.24508a76.js"></script></body></html>