Webpack 5 Hot Reload Not Working

Hi, I'm having troubles with hot reload where the page refreshes instead of hot reloading.

I'm not so familiar with webpack and it was a webpack 4 repository i picked up to update for webpack 5 then add TypeScript into it.

Here's package.json file

{
  "name": "@iotaboard/remote-dashboard-starter",
  "version": "1.0.0-semantic-versioning",
  "description": "Remote Dashboard Starter",
  "private": true,
  "browser": "dist/main.js",
  "author": "Seiko Santana",
  "license": "MIT",
  "scripts": {
    "build": "npm run clean && cross-env NODE_ENV=production webpack --mode production",
    "build:dev": "npm run clean && cross-env NODE_ENV=development webpack --mode development",
    "webpack-dev-server": "cross-env NODE_ENV=development webpack serve --port 9090 --config webpack-dev-server.config.js",
    "start": "concurrently -n webpack,webpack-dev-server -c green,cyan \"npm run build:dev\" \"npm run webpack-dev-server\"",
    "start2": "npm run build:dev && webpack && webpack-dev-server",
    "start:remote": "concurrently \"npm run build -- --watch\" \"serve dist --cors -p 9999\"",
    "clean": "rimraf dist",
    "test": "echo no tests",
    "test:changed": "npm run test -- --changedSince HEAD",
    "test:coverage": "npm run test -- --coverage",
    "lint": "eslint .",
    "serve": "webpack serve"
  },
  "dependencies": {
    "@ionic/react": "6.4.2",
    "@ionic/react-router": "6.4.2",
    "@microsoft/signalr": "^7.0.2",
    "@types/react": "^18.0.26",
    "@types/react-dom": "^18.0.10",
    "@types/react-router": "^5.1.11",
    "@types/react-router-dom": "^5.1.7",
    "chartjs": "^0.3.24",
    "ionicons": "^6.1.3",
    "react": "^18.2.0",
    "react-chartjs-2": "^5.1.0",
    "react-dom": "^18.2.0",
    "react-router": "^5.2.0",
    "react-router-dom": "^5.2.0"
  },
  "devDependencies": {
    "@babel/cli": "^7.12.10",
    "@babel/core": "^7.12.10",
    "@babel/plugin-proposal-class-properties": "^7.12.1",
    "@babel/plugin-transform-runtime": "^7.12.10",
    "@babel/preset-env": "^7.12.10",
    "@babel/preset-react": "^7.12.10",
    "@babel/preset-typescript": "^7.18.6",
    "@babel/runtime": "^7.12.5",
    "@commitlint/cli": "^11.0.0",
    "@commitlint/config-conventional": "^11.0.0",
    "@paciolan/eslint-config-react": "^1.0.4",
    "@paciolan/remote-component": "^2.10.2",
    "babel-eslint": "^10.1.0",
    "babel-loader": "^8.2.2",
    "babel-plugin-transform-react-remove-prop-types": "^0.4.24",
    "concurrently": "^5.3.0",
    "core-js": "^2.6.12",
    "cross-env": "^7.0.3",
    "css-loader": "^6.7.3",
    "eslint": "^7.15.0",
    "eslint-config-prettier": "^6.15.0",
    "eslint-plugin-babel": "^5.3.1",
    "eslint-plugin-prettier": "^3.3.0",
    "eslint-plugin-react": "^7.21.5",
    "html-webpack-plugin": "^5.5.0",
    "prettier": "^2.2.1",
    "react-dom": "^18.2.0",
    "regenerator-runtime": "^0.13.7",
    "rimraf": "^3.0.2",
    "style-loader": "^3.3.1",
    "ts-loader": "^9.4.2",
    "webpack": "^5.75.0",
    "webpack-assets-manifest": "^5.1.0",
    "webpack-bundle-analyzer": "^4.7.0",
    "webpack-cli": "^5.0.1",
    "webpack-dev-server": "^4.11.1"
  }
}

And here's webpack-dev-server.config.js.

const HtmlWebpackPlugin = require("html-webpack-plugin");
const path = require("path");
const webpack = require("webpack");
const config = require("./webpack.config");

module.exports = {
  entry: "./src/webpack-dev-server.tsx",
  plugins: [
    ...config[0].plugins,
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "src/index.html"
    }),
    new webpack.EnvironmentPlugin({
      "process.env.NODE_ENV": process.env.NODE_ENV
    })
    // new webpack.NamedModulesPlugin(),
    // new webpack.HotModuleReplacementPlugin()
  ],
  optimization: {
    moduleIds: "named"
  },
  module: config[0].module,
  devServer: {
    hot: true,
    open: true,
    static: __dirname,
    headers: {
      "Access-Control-Allow-Origin": "*",
      "Access-Control-Allow-Methods": "GET, POST, PUT, DELETE, PATCH, OPTIONS",
      "Access-Control-Allow-Headers":
        "X-Requested-With, content-type, Authorization"
    }
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
    alias: {
      "remote-component.config.js": path.resolve("./remote-component.config.js")
    },
    fallback: {
      http: false,
      https: false
    }
  },
};

The console doesn't show any problems, except that it says Navigating to http: //localhost:9090 after saving some changes with dev server started with npm start.

The CLI does output a lot, but i found this

[webpack-dev-server] <i> [webpack-dev-middleware] wait until bundle finished: /
[webpack-dev-server] Error parsing bundle asset "D:\dashboard-modules\iotaboard-dashboard-rwth\dist\main.0b2b661771b9f2501667.hot-update.js": no such file

I've been searching around but I found no clue why it is refreshing instead of hot-reloading. What could be the cause? Thanks in advance