Error deploying app on website with Webpack and Babel (shows blank page)

I'm trying to deploy my app to my website but it deploys without errors in console but blank html page. The following are some of my files.

package.json:

    {
      "name": "name-here",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@material-ui/core": "^4.9.13",
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.3.2",
        "@testing-library/user-event": "^7.1.2",
        "bootstrap": "^4.4.1",
        "react": "^16.13.1",
        "react-bootstrap": "^1.0.1",
        "react-day-picker": "^7.4.8",
        "react-device-detect": "^1.12.1",
        "react-dom": "^16.13.1",
        "react-hook-form": "^5.6.2",
        "react-icons": "^3.10.0",
        "react-native-vector-icons": "^6.6.0",
        "react-router": "^5.1.2",
        "react-router-dom": "^5.1.2",
        "react-scripts": "3.4.1",
        "react-time-picker": "^4.0.1",
        "react-web-vector-icons": "^1.0.2",
        "requirejs": "^2.3.6"
      },
      "devDependencies": {
        "@babel/core": "^7.9.6",
        "@babel/preset-env": "^7.9.6",
        "@babel/preset-react": "^7.9.4",
        "babel-loader": "^8.1.0",
        "babel-preset-expo": "~8.1.0",
        "css-loader": "^3.5.3",
        "file-loader": "^6.0.0",
        "html-loader": "^1.1.0",
        "html-webpack-plugin": "^4.3.0",
        "react-scripts": "^3.4.1",
        "ttf-loader": "^1.0.2",
        "url-loader": "^4.1.0",
        "webpack": "^4.43.0",
        "webpack-cli": "^3.3.11",
        "webpack-dev-server": "^3.11.0"
      },
      "scripts": {
        "start": "webpack-dev-server --mode development",
        "build": "webpack --mode production",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      }
    }

webpack.config.js:

const HtmlWebPackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: path.join(__dirname, "src/index.js"),
  output: {
    path: __dirname + "/dist",
    publicPath: "/",
    filename: "bundle.js",
  },
  devServer: {
    contentBase: "./dist",
  },
  resolve: {
    extensions: ["*", ".js", ".jsx"],
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: ["babel-loader"],
      },
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(jpe?g|png|gif|svg)$/i,
        exclude: /node_modules/,
        loader: "url-loader",
      },
      {
        test: /\.html$/,
        exclude: /node_modules/,
        use: [
          {
            loader: "html-loader",
          },
        ],
      },
      {
        test: /\.(woff|woff2|eot|ttf)$/,
        exclude: /node_modules/,
        loader: "url-loader?limit=100000",
      },
    ],
  },
  plugins: [
    new HtmlWebPackPlugin({
      template: path.join(__dirname, "public/index.html"),
      filename: "./index.html",
    }),
  ],
};

.babelrc

{
    "presets": ["@babel/preset-env", "@babel/preset-react"]
}

index.html:

<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>Name here</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from '../src/App';
import 'bootstrap/dist/css/bootstrap.min.css';

ReactDOM.render(
    <App />,
  document.getElementById('root')
);

Could someone please guide me to a solution? I have generated a build folder and dist folder. It builds successfully.