React wont let me use ReactDOM.render() because its not a function?

Im working on a simple demo crud app to learn react and my frontend wont render. this is the error i get in the console of the browser dev tools when i run npm start I've spent about half the week trying to figure this out by searching the error message for similar things, but they pretty much all are cause by a missing import statement but im pretty sure all mine are correct... Im new to react and mostly trying to just get a basic front end working on with my java backend, but i just get a blank white screen every time.

Uncaught TypeError: react_dom__WEBPACK_IMPORTED_MODULE_1__ is not a function
    at Module../src/index.js (index.js:13:1)
    at Module.options.factory (react refresh:6:1)
    at __webpack_require__ (bootstrap:24:1)
    at startup:7:1
    at startup:7:1

this is my App.js file

import React, {Component} from 'react';
import {
  Routes,
  Route,
  Link,
} from "react-router-dom";
import AddTutorial from "./components/add-tutorial.component";
import Tutorial from "./components/tutorial.component";
import TutorialsList from "./components/tutorials-list.component";
import './App.css';
import "bootstrap/dist/css/bootstrap.min.css";


class App extends Component {
  render() {
return (<div>
  <nav className='navbar navbar-expand navbar-dark bg-dark'>
     <a href='/tutorials' className='navbar-brand'>
       Sean Rogan Dev
     </a>
     <div className='navbar-nav mr-auto'>
     <li className='nav-item'>
<Link to={"/tutorials"} className='nav-link'>
Tutorials
</Link>
     </li>
     <li className='nav-item'>
     <Link to={"/tutorials"} className='nav-link'>
     Add
     </Link>
     </li>
     </div>
  </nav>
  <div className='container mt-3'>
      <Routes>
      <Route path={["/","/tutorials"]} element={<TutorialsList/>}/>
      <Route path="/add" element={<AddTutorial/>}/>
      <Route path="/tutorials/:id" element={<Tutorial/>}/>
      </Routes>
  </div>
</div>);
  }
}
export default App;

this is my index.js file

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import {
BrowserRouter,
Routes,
Route } from 'react-router-dom';
import * as serviceWorker from "./serviceWorker";

const container = document.getElementById('root');
ReactDOM(container).render(
<React.StrictMode>
  <BrowserRouter>
    <Routes>
        <Route path="/" element={ <App /> }>
        </Route>
    </Routes>
  </BrowserRouter>
</React.StrictMode>
);
serviceWorker.unregister();

reportWebVitals();