File-loader with html-loader not bundling the correct image source

Question

I have a src folder and it contains images forlder, sass folder, js folder (inside it has index.js), and index.html file.(I also included a screenshot of the project tree) When I run npm run build, it creates an images folder in the dist folder which is expected, but in the html img tag, the sourses are like this src="f6cd9a5122c08e1cab70.svg" which is not expected. Also, it generates those image files in the root directory which is dist folder. It is not dynamically injecting the correct source in the html file.

NPM packages: "file-loader": "^6.2.0", "html-loader": "^4.2.0", "html-webpack-plugin": "^5.5.1", "webpack": "^5.80.0", "webpack-cli": "^5.0.1",

Here is my webpack.config.js file:

const path = require("path");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./src/js/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "bundle.js",
  },
  mode: "development",
  devServer: {
    port: 2222,
    hot: false,
    open: true,
  },
  module: {
    rules: [
      {
        test: /\.scss$/,
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.html$/,
        loader: "html-loader",
      },
      {
        test: /\.(png|jpe?g|gif|svg)$/,
        loader: "file-loader",
        options: {
          name: "[name].[hash].[ext]",
          publicPath: "images",
          outputPath: "images",
        },
      },
    ],
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),

    new HtmlWebpackPlugin({
      template: "./src/index.html",
    }),
  ],
};

Project tree Screenshot