How to import Component in React

I'm new to React and as I'm following a tutorial I need to divide different components into their own files. I tried making a separate file for the Header component but all I get is a white screen.

Main React file:

import Header from "./Header"

function Page(){
    return(
        <div>
           <Header />
        </div>
    )
}

ReactDOM.render(<Page />, document.getElementById('root'))

The file for the Header component is called Header.js and it's in the same directory.

Header.js:

export default function Header(){
    return(
        <header>
        <nav className="nav">
            <img className="logo" src="./react-logo.png" />

            <ul className="nav-items">
                <li>Pricing</li>
                <li>About</li>
                <li>Contact</li>
            </ul>
        </nav>
        </header>
    )
}

This is probably so simple to fix but I don't know how to fix it