React webpack-dev-server HMR causes full page reload - reactjs

Question

I'm new to custom webpack world and have a custom webpack configration with webpack-dev-server's HMR. HMR working as expected by the console logs.
But after seeing [HMR] App is up to date. in logs, i also see Navigated to http://0.0.0.0:9000/ message from Chrome. And then whole page reloads itself
I only edited TempPerformance.tsx .
My App.tsx is a class based component but it's children are functional components.
Webpack related packages that i use:
"webpack": "5.71.0",
"webpack-cli": "4.10.0",
"webpack-dev-server": "4.8.0",
"webpack-dotenv-plugin": "2.1.0",
"webpack-merge": "5.8.0"
"ts-loader": "9.2.6",
"terser-webpack-plugin": "5.2.5",
"sass-loader": "12.4.0",
"style-loader": "3.3.1",
"inline-source-map": "0.6.2",
"html-loader": "3.0.1",
"clean-webpack-plugin": "4.0.0",
"compression-webpack-plugin": "9.2.0",
"node-polyfill-webpack-plugin": "1.1.4",
My webpack.common.js
const path = require("path");
const { DefinePlugin, ProvidePlugin } = require("webpack");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const NodePolyfillPlugin = require("node-polyfill-webpack-plugin");
module.exports = {
entry: {
main: "./src/index.tsx",
signup: "./src/signup.tsx",
},
module: {
rules: [
{
test: /\.tsx?$/,
use: "ts-loader",
exclude: /node_modules/,
},
{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
"style-loader",
// Translates CSS into CommonJS
{
loader: "css-loader",
options: {
url: true,
modules: {
auto: (resourcePath) => {
const filename = resourcePath.replace(/^.*[\\\/]/, "");
return (
resourcePath.endsWith("palette.scss") ||
/\.module\.\w+$/i.test(filename)
);
},
},
},
},
// Compiles Sass to CSS
"sass-loader",
],
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
},
{
test: /\.(woff|woff2|eot|ttf|otf)$/,
use: [
{
loader: "file-loader",
options: {
name: "./[name].[ext]",
outputPath: "fonts",
publicPath: "/assets/fonts",
},
},
],
},
{
test: /\.(png|jpeg|png)$/,
use: [
{
loader: "file-loader",
options: {
name: "./[name].[ext]",
outputPath: "images",
publicPath: "/assets/images",
},
},
],
},
{
test: /\.html$/,
loader: "html-loader",
},
{
test: /\.svg$/i,
issuer: /\.[jt]sx?$/,
use: ["#svgr/webpack"],
},
],
},
plugins: [
new DefinePlugin({
"process.env": {
VERSION: JSON.stringify(require("./package.json").version),
API_HOST: JSON.stringify(process.env.API_HOST),
A_PRODUCT: JSON.stringify(process.env.A_PRODUCT),
},
}),
new ProvidePlugin({
Buffer: ["buffer", "Buffer"],
process: "process/browser",
}),
new CleanWebpackPlugin({
cleanOnceBeforeBuildPatterns: path.resolve(__dirname, "public", "assets"),
dangerouslyAllowCleanPatternsOutsideProject: true,
}),
new NodePolyfillPlugin(),
],
resolve: {
extensions: [".tsx", ".ts", ".js", ".jsx", ".css", ".scss"],
fallback: {
process: require.resolve("process"),
stream: require.resolve("stream-browserify"),
"readable-stream": require.resolve("readable-stream"),
path: require.resolve("path-browserify"),
zlib: require.resolve("browserify-zlib"),
util: require.resolve("util"),
buffer: require.resolve("buffer"),
assert: require.resolve("assert"),
module: false,
dgram: false,
dns: "mock",
fs: false,
http2: false,
net: false,
tls: false,
child_process: false,
},
},
output: {
filename: "[name].bundle.js",
path: path.resolve(__dirname, "public", "assets/"),
publicPath: "/assets/",
},
snapshot: {
managedPaths: ["/node_modules/#types/*"],
},
// node : {
// }
};
My webpack.dev.js
const { DefinePlugin } = require("webpack");
const WebpackMerge = require("webpack-merge");
const common = require("./webpack.common.js");
module.exports = WebpackMerge.merge(common, {
mode: "development",
devtool: "inline-source-map",
plugins: [
new DefinePlugin({
"process.env.NODE_ENV": JSON.stringify("development")
})
],
devServer: {
static: "./public",
compress: true,
host: "0.0.0.0",
port: 9000,
headers: {
"Access-Control-Allow-Origin": "http://127.0.0.1:5000"
},
hot: true,
liveReload: false
}
});
I'm expecting only the component i edited should refresh, not the whole page. When I use NextJs/cra or vite i can be able to do that. What's the thing I'm doing wrong?
Thank you.