Webpack not updating page when I refresh to reflect new code - reactjs

Question

So I am doing a project using Django and React.
I was working on it yesterday and it worked fine, but today after I run the command 'py ./manage.py runserver' along with 'npm run dev', my project loads but whenever I make changes to my code, these changes are not reflected when I update the page.
I tried fixing this but couldn't do it so far.
Here are my files:
webpack.config.js:
const path = require("path");
const webpack = require("webpack");
module.exports = {
entry: "./src/index.js",
output: {
path: path.resolve(__dirname, "./static/frontend"),
filename: "[name].js",
},
module: {
rules: [
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
},
},
],
},
optimization: {
minimize: true,
},
plugins: [
new webpack.DefinePlugin({
'process.env.NODE_ENV' : JSON.stringify('development')
// This has effect on the react lib size
}),
],
};
package.json:
{
"name": "frontend",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"dev": "webpack --mode development --watch",
"start": "react-scripts start",
"build": "webpack --mode production"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"#babel/core": "^7.13.15",
"#babel/preset-env": "^7.13.15",
"#babel/preset-react": "^7.13.13",
"babel-loader": "^8.2.2",
"webpack": "^5.34.0",
"webpack-cli": "^4.6.0"
},
"dependencies": {
"#babel/plugin-proposal-class-properties": "^7.13.0",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-icons": "^4.2.0",
"react-router-dom": "^5.2.0"
}
}

Answer 1

Please consider to try this:
Create a .env file inside your Application root
Set FAST_REFRESH=false inside your .env
Restart your Server