Hi I am new to react and trying to under components

I am trying to make a header, I have created an Header.js file within an components folder which consists of this.

export default function Header() {
   return(
       <h1 className="header-title">Just Because</h1>
   );
}

I import and call my Header() in App.js

import logo from './logo.svg';
import './App.css';
import {Header} from './components/Header.js';
function App() {
  return (
    <div className="App">
      <header className="App-header">
        <Header/>
      </header>
    </div>
  );
}

export default App;

Currently I am getting this error message

createRoot(…): Target container is not a DOM element.
at createRoot (http://localhost:3000/static/js/bundle.js:31288:15)
at Object.createRoot$1 [as createRoot] (http://localhost:3000/static/js/bundle.js:31668:14)
at exports.createRoot (http://localhost:3000/static/js/bundle.js:31744:16)
at ./src/index.js (http://localhost:3000/static/js/bundle.js:222:60)
at options.factory (http://localhost:3000/static/js/bundle.js:41776:31)
at webpack_require (http://localhost:3000/static/js/bundle.js:41199:33)
at http://localhost:3000/static/js/bundle.js:42422:37
at http://localhost:3000/static/js/bundle.js:42424:12

I understand its saying that Header is not DOM (Document Object Model) but do not understand why? Initially had a error such as export ‘Header’ (imported as ‘Header’) was not found in ‘./components/Header.js’ (possible exports: default) but I found this post import error: ‘Header’ is not exported from ‘components/Header’ and I removed the “default”, but I am finding myself going around in circles. Any suggestions would be greatly appreciated