Webpack dev server hot module replacement working on .js files but not working on .html file updates

Question

My package.json file looks like:

{
  scripts": {
    "start": "webpack-dev-server"
  },
  "author": "Mak Alamin",
  "license": "ISC",
  "dependencies": {
    "bcryptjs": "^2.4.3",
    "body-parser": "^1.19.0",
    "express": "^4.17.1",
    "mongoose": "^6.0.12",
    "validator": "^13.6.0"
  },
  "devDependencies": {
    "@babel/core": "^7.16.0",
    "@babel/preset-env": "^7.16.0",
    "babel-loader": "^8.2.3",
    "html-loader": "^3.0.0",
    "html-webpack-plugin": "^5.5.0",
    "webpack": "^5.61.0",
    "webpack-cli": "^4.9.1",
    "webpack-dev-server": "^4.4.0"
  } 
}

My webpack.config.js file looks like:

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

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    mode: 'development',
    devServer: {
        port: 9000,
        compress: true,
        open: true,
        hot: true
    },
    module: {
        rules: [
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.html$/,
                loader: "html-loader",
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ]
}

I'm using html-loader with webpack. The issue is hot module replacement working fine when I update .js files but not working when I update the .html files.

How does this hot module works with html files also?

Please help!