React hot loader with webpack 5 loading whole page

Question

I am pretty new to webpack and am confused by a range of answers. I have 3 components app.js, customButton, Sample.js whenever I change any text in any of the files the whole page is reloading. Can anyone help me out with webpack5 configuration if I have made any mistake.

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
  entry: "./src/index.js",
  
  output: {
        filename: '[name].bundle.js',
        path: path.resolve(__dirname, "./dist"),
        clean: true,
        publicPath: "/static/",
        sourceMapFilename: "[name].bundle.js.map"
  },
  devServer: {
        contentBase: path.resolve(__dirname, "./dist"),
        overlay: {
              errors: true,
              warnings: true
        },
        inline: true,
        index: "index.html",
        port: 8080,
        writeToDisk: true,
        stats: {
              chunks: false,
              modules: false,
              publicPath: false,
              assets: false,
              children: false,
              colors: true
        },
  },
  optimization: {
        splitChunks: {
              chunks: "all"
        }
  },
  module: {
        rules: [
              {
                    test: /\.(png|jpe?g|gif)$/,
                    type: 'asset/resource'
              },
              {
                    test: /\.css$/,
                    use: [
                          'style-loader', 'css-loader'
                    ]
              },
              {
                    test: /\.s[ac]ss$/,
                    use: [
                          'style-loader',
                          'css-loader',
                          'sass-loader'
                    ]
              },
              {
                    test: /\.(js|jsx)$/,
                    exclude: /node_modules/,
                    use: [
                          {
                                loader: 'react-hot-loader/webpack',
                          },
                          {
                                loader: 'babel-loader',
                                options: {
                                      presets: ['@babel/preset-env', '@babel/preset-react'],
                                      plugins: ['@babel/plugin-proposal-class-properties']
                                }
                          }
                    ]
              },
              // {
              //       test: /\.js$/,
              //       exclude: /node_modules/,
              //       use: [
              //             {
              //                   loader: 'babel-loader',
              //                   options: {
              //                         presets: ['@babel/env'],
              //                         plugins: ['@babel/plugin-proposal-class-properties']
              //                   }
              //             }
              //       ]
              // }
        ],
  },
  plugins: [
        new HtmlWebpackPlugin({
              template: path.join(__dirname, "public", "index.html"),
        }),
  ],
  devtool: 'inline-source-map'

}`

My package.json scripts.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack --mode production --config webpack.prod.config.js",
    "dev": "webpack serve --mode development --config webpack.dev.config.js --hot"
},

App.js

const App = () => {
  return (

        <div className="App">
              <h2>Hi, Guyss !</h2>
              <Suspense fallback={<div>Loading .. </div>}>
                    <CustomButton />
                    <Login />
              </Suspense>
        </div>


  )

}

export default App;