Wepack 5 My Components are Not Rendering Properly - reactjs

Question

My Components are not rendering properly on the screen eventhough there are no errors in the console. I think I didnt configure my Webpack 5 well for production. This happens when I type in the terminal "yarn run dev-server" or "npm run serve"
Here are my scripts in package.json:
"scripts": {
"serve": "live-server public/",
"build:dev": "webpack --mode development",
"build:prod": "webpack --mode production --env production",
"dev-server": "webpack serve --mode development --open",
"test": "jest --config=jest.config.json"
},
Here is my webpack file (also not sure if I should separate them into different files):
const path = require('path');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = (env)=>{
const isProduction = env === 'production';
return {
entry: './src/app.js',
output: {
path:path.join(__dirname, 'public'),
filename:'bundle.js'
},
module: {
rules:[{
loader: 'babel-loader',
test: /\.js$/,
exclude: /node_modules/
},
{
test: /\.s?css$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
// 'style-loader',
],
}]
},
plugins: [new MiniCssExtractPlugin()],
devtool: isProduction ? 'source-map': 'eval-cheap-module-source-map',
performance: {
hints: false,
maxEntrypointSize: 512000,
maxAssetSize: 512000
},
devServer: {
static: path.join(__dirname, 'public'),
historyApiFallback: true
}
};
};
Please let me know what I need to do.