Webpack HMR not updating in html file

I am using webpack 5 now and using HMR for hot module replacements. But It shows in console that hmr working but that is not updating in HTML file.

My webpack.config.js file is:

    const path = require('path');
module.exports = {
    entry: {
        bundle: './src/index.js'
    },
    output: {
        path: path.resolve( __dirname, 'assets' ),
        filename: '[name].js'
    },
    mode: 'development',
    module: {
        rules: [
            {
                test: /\.(js)$/,
                exclude: /node_modules/,
                use: [ 'babel-loader']
            },
            {
                test: /\.s[ac]ss$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader', 'sass-loader']
            },
            {
                test: /\.less$/,
                use: [{
                    loader: "style-loader"
                }, {
                    loader: "css-loader"
                }, {
                    loader: "less-loader",
                    options: {
                        lessOptions: {
                            javascriptEnabled: true
                        }
                    }
                }]
            }
        ]
    },
    devServer : {
        headers: {
            'Access-Control-Allow-Origin': '*'
        },
        client: {
            progress: true,
        },
        allowedHosts: 'all',
        hot: true,
        static: {                               
            directory: path.join(__dirname, 'dist')
        },
        
    }
} 

My package.json is

  {
"name": "booking",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
  "build": "cross-env BABEL_ENV=default NODE_ENV=production webpack",
  "start": "webpack-dev-server --hot"
},
"author": "",
"license": "ISC",
"dependencies": {
  "@ant-design/icons": "^4.7.0",
  "@headlessui/react": "^1.4.1",
  "@heroicons/react": "^1.0.4",
  "@reduxjs/toolkit": "^1.6.1",
  "@tailwindcss/forms": "^0.3.4",
  "antd": "^4.16.13",
  "axios": "^0.21.4",
  "bootstrap-icons": "^1.5.0",
  "date-fns": "^2.24.0",
  "moment": "^2.29.1",
  "react": "^17.0.2",
  "react-bootstrap-icons": "^1.5.0",
  "react-dom": "^17.0.2",
  "react-multi-date-picker": "^3.1.7",
  "react-nice-dates": "^3.1.0",
  "react-redux": "^7.2.5",
  "react-smooth-list": "^1.0.2",
  "redux": "^4.1.1"
},
"devDependencies": {
  "@babel/core": "^7.15.5",
  "@babel/preset-env": "^7.15.6",
  "@babel/preset-react": "^7.14.5",
  "autoprefixer": "^10.3.4",
  "babel-loader": "^8.2.2",
  "babel-plugin-import": "^1.13.3",
  "cross-env": "^7.0.3",
  "css-loader": "^6.2.0",
  "html-webpack-plugin": "^5.5.0",
  "less": "^4.1.2",
  "less-loader": "^10.2.0",
  "node-sass": "^6.0.1",
  "postcss": "^8.3.6",
  "sass": "^1.39.2",
  "sass-loader": "^12.1.0",
  "style-loader": "^3.2.1",
  "tailwindcss": "^2.2.15",
  "webpack": "^5.52.0",
  "webpack-cli": "^4.8.0",
  "webpack-dev-server": "^4.7.4"
}

}

My main problem is its compiling in the console but not updating in htm file actually..I have mentioned if (module.hot) module.hot.accept() in my ./src/index.js file, but its not working yet.Anything I need to do more to get this working!

My ./dist/index.html is:

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="wp-booking-press-container"></div>
    <script src="bundle.js"></script>
</body>
</html>