importing crashes the page in react js – Blancer.com Tutorials and projects

I am working on a react project and when I try to separate my components into different files, I get this error:

caught ReferenceError: require is not defined
    at <anonymous>:3:15
    at Ove (transformScriptTags.ts:99:10)
    at n (transformScriptTags.ts:173:9)
    at s (transformScriptTags.ts:204:11)
    at Lve.t.forEach.e.src.o.onreadystatechange (transformScriptTags.ts:121:9)

My index.js is:

import Header from "./Header"
function MyFunction() {
    return (
        <div>
            <Header />
        </div>
    )
}
const root = ReactDOM.createRoot(document.getElementById("root"))
root.render(<MyFunction />)

and my Header.js is:

export default function Header() {
    return (
        <header>
            <nav className="nav">
                <img className="nav-img" src="Bait&Debate.jpg" alt="My App"/>
                <ul className="nav-items">
                    <li>Pricing</li>
                    <li>About</li>
                    <li>Contact</li>
                </ul>
            </nav>
        </header>
    )
}

and my index.html is:

<html>
    <head>
        <link rel="stylesheet" href="index.css">
        <script src="https://unpkg.com/react@18/umd/react.development.js" crossorigin></script>
        <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js" crossorigin></script>
        <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    </head>
    <body>
        <div id="root"></div>
        <script src="index.js" type="text/babel"></script>
    </body>
</html>

I suspect that it has something to do with require() that is being called under the hood, but I am not calling that anywhere in my project here. Does anyone know why I am getting that error? If I put header into the index.js file the error goes away, but importing it from Header.js causes this problem.