How to place the root div with React renderer?

I created a MainPage folder, inside of which I created a Main.js file. I want to display certain contents on my page with this. Even though I call Main.js in the App.js file, the content does not appear. I tried several solutions, but none of them worked. I tried creating a div in the HTML section wi th the "root" id, but I'm not entirely sure where to place it.

So here is the Main.js

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

export default function Main()
{
return
(

   <body>
      <div id='root'>
      <header className="header">
        <div className="top-bar">
          <div className="top-bar__content">
            <section className="phone">
              <i className="fa-solid fa-phone icon"></i>
              <span></span>
            </section>
            <section className="email">
              <i className="fa-solid fa-envelope icon"></i>
              <span></span>
            </section>
          </div>
        </div>

        <div className="bottom-bar">
          <div className="bottom-bar__content">
            <a href="#" className="logo">
              <img className="logo__img" src="pictures/logo.svg" alt="logo" />
              <span className="logo__text"></span>
            </a>

            <nav className="nav">
              <ul className="nav__list">
                <li className="nav__item">
                  <a className="nav__link" href="#"></a>
                </li>
                <li className="nav__item">
                  <a className="nav__link" href="#"></a>
                </li>
                <li className="nav__item">
                  <a className="nav__link" href="#"></a>
                </li>
                <li className="nav__item">
                  <a className="btn" href="#"></a>
                </li>
              </ul>
            </nav>
      
            <div className="hamburger">
              <div className="bar"></div>
              <div className="bar"></div>
              <div className="bar"></div>
            </div>
          </div>
        </div>

      </header>
      </div>
      </body>

);
}

the App.js

import React from 'react';
import Main from './MainPage/Main';

function App() {
  return (
    <div className="App">
      <Main />
    </div>
  );
}

export default App;

and the index.js

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

Solution

As suggested in @Joshua's answer your index.html file should contain the root id.

And I tried to compile your code in a sandbox, and this is the change which fixed the issue for me.

In your main page you wrote as below

...
export default function Main()
{
return
(

   <body>
      <div id='root'>
...

Change this to as below, this fixed the issue for me

...
export default function Main()
{
return (

   <body>
      <div id='root'>
...

This bracket ( seems to be messing with your code. Please check