Localhost doesn't update changes in App.js

I’m trying to add a component to my App.js so I can see it reflected in localhost but I only see the text I wrote before. I tried just changing the text but it’s also the same one. Opening it in incognito mode does not help, neither does disabling the cache.
Is something else happening?

This is App.js:

This is the App.js:

import React, { Component } from 'react';
import { render } from "react-dom";

export class App extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            
                <h1> The View </h1>
            
        )
    }
}

const appDiv = document.getElementById('app');
render(<App />, appDiv);

This is the package.json:

{
  "name": "frontend",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development --watch",
    "build": "webpack --mode production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/core": "^7.14.0",
    "@babel/preset-env": "^7.14.1",
    "@babel/preset-react": "^7.13.13",
    "babel-loader": "^8.2.2",
    "reac": "*",
    "react-dom": "^17.0.2",
    "webpack": "^5.36.2",
    "webpack-cli": "^4.6.0"
  },
  "dependencies": {
    "@babel/plugin-proposal-class-properties": "^7.13.0",
    "@material-ui/core": "^4.11.4",
    "react-router-dom": "^5.2.0"
  }
}

This is the HTML:

<!DOCTYPE html> 
<html>
    <head>
        <meta charset="UTF-8">
        <title>Forum</title>
        {% load static %}
        <link rel= "stylesheet" type="text/css" href="{%static "css/index.css" %}"/>
    </head>

    <body>
        <div id="main">
            <div id="app"></div>
        </div>
        <script src="{% static "frontend/main.js" %}"/>
    </body>
</html>