I am unable to run React.Js app from a docker container

Question

i am trying to run a react.js app inside a docker container. I am using typescript, mdbootstrap template and also webpack with the reactjs app.

I am able run the npm run start command and react.js application works fine.Reactjs app work perfectly outside the docker container but when i try to run docker-compose up command, i get a server logs which says that "Compiled successfully", when i visit the http://localhost:3000/ url. I get an message "The connection was reset". I have spent last couple of days try make the react app work inside the docker container.

Thanks in advance.

This is my Dockerfile:

FROM node:16
WORKDIR /app
COPY package*.json ./

RUN npm install

# Bundle app source
COPY . /app
CMD [ "npm", "start" ]

This is my docker-compose.yml file:

version: "3"
services:
  pi-client:
    container_name: pi-client
    restart: always
    build: ./frontend/
    ports:
      - "3000:3000"
    expose:
      - 3000

networks:
  default:

This is my webpack.config.js file:

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry: './src/pages/index.tsx',
  output: {
    publicPath: '/',
  },
  devServer: {
    historyApiFallback: true,
    open: true,
    compress: true,
    port: 3000,
    hot: true,
  },
  resolve: {
    alias: {
      'mdb-react-ui-kit': path.resolve('./src/index.tsx'),
    },
    extensions: ['.tsx', '.ts', '.js', '.d.ts'],
  },
  module: {
    rules: [
      {
        test: /\.(js)$/,
        exclude: /node_modules/,
        use: ['babel-loader'],
      },
      {
        test: /\.tsx?$/,
        loader: 'ts-loader',
        exclude: /node_modules/,
      },
      {
        test: /\.((c|sa|sc)ss)$/i,
        use: ['style-loader', 'css-loader', 'sass-loader'],
      },
      {
        test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,
        use: 'file-loader',
      },
      {
        test: /\.(woff|woff2)$/,
        use: 'url-loader?prefix=font/&limit=5000',
      },
      {
        test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=application/octet-stream',
      },
      {
        test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader',
      },
      {
        test: /\.png(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=image/png',
      },
      {
        test: /\.gif(\?v=\d+\.\d+\.\d+)?$/,
        use: 'url-loader?limit=10000&mimetype=image/gif',
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: 'public/index.html',
    }),
  ],
};