Unable to render jsx onto html file

Trying to practice jsx with a react app I built with npx create-react-app. I have two files I am able to render the app with npm run, but when loading the html file locally I cannot see the rendered content. I took code from example code I used that code exactly it works properly but when using my code formatted to be same syntax it doesn’t work.
My two files are app and index.js

import './App.css';
import React from 'react';

export class Main extends React.Component {
  render() {
   return (
    <div className="mission-grid">
    <h2 className="mission-title">Mission</h2>
<article className="mission-statement">
    <p className="missionp">Develop high quality and affordable websites/applications, 
        enable clients to establish presence online, enhance
        web solutions and assure accessibility on the web.

<h2 className="project-title">Projects</h2>
<div id="projects">
        <a href="https://github.com/EyesWithoutFace/Fortune-Teller"><li>Fortune-Teller</li></a>
        <a href="https://github.com/EyesWithoutFace/PySimpleGui-Calculator"><li>Python Calculator</li></a>
        <a href="https://github.com/EyesWithoutFace/Snake-Game-Python"><li>Snake Game (Python)</li></a>
        <a href="./dima/dima.html"><li>Dima the Cat</li></a>
<div id="skills"></div>
<img src="html5.png" alt="HTML" id="html5"/>
<img src="css3.png" alt="CSS" id="css3"/>
<img src="javascript.png" alt="Javascript" id="javascript-img"/>
<img src="cli.png" alt="Command Line(Linux)" id="cli-img"/>
<img src="git.png" alt="Git" id="git-img"/>
<img src="python.png" alt="Python" id="python-img"/>
export default Main


import React from 'react';

import ReactDOM from 'react-dom/client';

import Main from './App';

const domContainer = document.querySelector('#root');

const root = ReactDOM.createRoot(domContainer);


I tried getting help from the discord but to no avail. These files are both inside react-app/src/ and the html file is in react-app/public
if any additional info is needed please let me know