(React with Webpack) react-router-dom module works in development, but doesn't work when deployed

Question

So my project was all going well, it's all doing great, until I tried deploying it to Digital Ocean. The first landing page went well, but once I start to route, it gives out 404 error page instead

below is my webpack.config.js

module.exports = {
   context: __dirname,
   devtool: 'source-map',
   entry: ['./src/js/index.js','./src/sass/index.scss'],
   output: {
      path: path.resolve( __dirname, 'dist/' ),
      filename: 'main.js',
      publicPath: '/',
   },
   devServer: {
      historyApiFallback: true,
      contentBase: path.join(__dirname, 'dist'),
   },
   module: {
      rules: [
         {
            test: /.(js|jsx)$/,
            loader: 'babel-loader',
            exclude: [/node_modules/],
            options: {
                presets: ['@babel/react', "@babel/preset-env"]
            }
         },
         {
            test: /\.scss$/,
            use: ["style-loader", "css-loader", "sass-loader"]
        },
         {
            test: /\.css$/,
            use: ['style-loader', 'css-loader'],
         },
         {
            test: /\.(gif|png|jpe?g|svg|webp)$/i,
            use: [
               'file-loader',
               {
                  loader: 'image-webpack-loader',
                  options: {
                  bypassOnDebug: true, // webpack@1.x
                  disable: true, // webpack@2.x and newer
                  },
               },
            ],
         }
    ]
   },
   plugins: [
        new HtmlWebPackPlugin({
            template: path.resolve( __dirname, 'public/index.html' ),
            filename: 'index.html',
        }),
        new webpack.ProvidePlugin({
            "React": "react",
        }),
        new CopyWebpackPlugin({
            patterns: [
                { from: 'public/assets' }
            ]
        }),
   ]
};

I also tried using nginx server in Digital Ocean Droplet, below is my nginx file:

server {
    listen 80;
    listen [::]:80;
    
    root /var/www/html;
    index index.html index.html index.nginx-debian.html;

    server_name example.com;

    location / {
        try_files $uri /index.html;
    }
}

is this because of my webpack config? or is it something else?