Element Not rendering (React, Django)

ReactJS
1

Hi everyone, I just started learning React and Django and I have been struggling with a bug for days: I can’t render anything on my website using react.

Here is my App.js:

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

export default class App extends Component {
  
  render() {
return (
  <h1> Testing React </h1> 
);
  }
}


render(<App />, document.getElementById("app"));

My index.js:
import App from './components/App.js';

and my index.html:

<!DOCTYPE html>
<html>
  <head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Music Controller</title>
{% load static %}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link
  rel="stylesheet"
  href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
/>
<link rel="stylesheet" type="text/css" href="{% static "css/index.css" %}"
/>
  </head>
  <body>
<div id="main">
  <div id="app"></div>
</div>
  </body>
  {% load static%}
<script src="{% static "frontend/main.js" %}"></script>
</html>

PS : It’s not throwing any errors when running ‘npm run dev’ and ‘python .\manage.py runserver’ .