Deployment Issue: React application not rendering properly on github pages - node.js

Question

I have created a react redux front end app. The app is working perfectly fine using node CLI and accessible using localhost:3050 or localhost:8080. However, if I try to run production build using github pages the page only renders partially. The same is observed if I open the production index.html file directly in the browser. I have searched for hours but not able to find the any clue. Here is the github repo and the public url of the project. Any help would be deeply appreciated.
Here is some of the configuration and package files
package.json
{
"name": "items-random-rater",
"version": "0.1.0",
"private": true,
"author": "Muhammed Salman Shamsi",
"dependencies": {
"axios": "^0.19.0",
"babel-polyfill": "^6.26.0",
"bootstrap": "^4.3.1",
"lodash": "^4.17.15",
"nodemon": "^1.19.1",
"popper.js": "^1.15.0",
"react": "^16.9.0",
"react-dom": "^16.9.0",
"react-redux": "^7.1.1",
"react-router-dom": "^5.0.1",
"react-scripts": "3.1.1",
"redux": "^4.0.4",
"redux-thunk": "^2.3.0"
},
"scripts": {
"start": "nodemon server.js",
"test": "mocha --require babel-polyfill --require babel-core/register --require ./test/withDom.js --require ./test/test_helper.js --recursive ./test",
"test:watch": "npm run test -- --watch",
"clean": "rimraf public",
"build": "NODE_ENV=production npm run clean && webpack -p",
"serve": "webpack-dev-server",
"deploy": "npm run build && gh-pages -d public"
},
"devDependencies": {
"#fortawesome/fontawesome-free": "^5.10.2",
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-preset-env": "^1.7.0",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-2": "^6.24.1",
"chai": "^4.2.0",
"chai-jquery": "^2.1.0",
"css-loader": "^1.0.0",
"enzyme": "^3.10.0",
"enzyme-adapter-react-16": "^1.14.0",
"eslint": "^5.13.0",
"eslint-config-airbnb": "^17.1.0",
"eslint-plugin-import": "^2.16.0",
"eslint-plugin-jsx-a11y": "^6.2.1",
"eslint-plugin-react": "^7.12.4",
"express": "^4.17.1",
"gh-pages": "^2.1.1",
"html-webpack-plugin": "^3.2.0",
"jquery": "^3.4.1",
"jsdom": "^15.1.1",
"mini-css-extract-plugin": "^0.4.1",
"mocha": "^6.2.0",
"node-sass": "^4.9.2",
"postcss-loader": "^2.1.6",
"redux-mock-store": "^1.5.3",
"rimraf": "^2.7.1",
"sass-loader": "^7.1.0",
"webpack": "^4.39.3",
"webpack-cli": "^3.3.7",
"webpack-dev-middleware": "^3.7.0",
"webpack-dev-server": "^3.8.0"
}
}
webpack.config.json
var webpack = require('webpack');
var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const env = process.env.NODE_ENV;
const VENDOR_LIBS = [
"lodash","react","react-dom","react-redux",
"redux","axios"
];
module.exports = {
mode: env || 'development',
entry: {
bundle: ['babel-polyfill','./src/index.js'],
vendor: VENDOR_LIBS
},
output: {
path: path.join(__dirname, 'public'),
filename: '[name].[chunkhash].js'
},
module: {
rules: [
{
use: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
use: ['style-loader', 'css-loader'],
test: /\.css$/
},
{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
{
loader: 'babel-loader',
options: {
presets: ['env','react','stage-2']
}
}
]
},
{
test: /\.scss$/,
use: [
'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader',
'sass-loader'
]
},
{
test: /\.(jpe?g|png|gif|woff|woff2|eot|ttf|svg)(\?[a-z0-9=.]+)?$/,
loader: 'url-loader?limit=100000'
}
]
},
devtool: 'inline-source-map',
devServer: {
contentBase: path.join(__dirname, 'public'),
publicPath: '/public/',
compress: true,
port: 8080
},
plugins: [
new HtmlWebpackPlugin({
template: 'src/index.html'
}),
new MiniCssExtractPlugin({
filename: 'style.[contenthash].css'
}),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV)
})
]
};