i'm working on some react projects and i've tried to orginize my code by moving some components to another files then import them but when i do that it just give me a blank page , when i write (import Header from "./Header") it starts to give blank page while it was working when i was putting all of the code in index.js only . this is my main index code:

import Header from "./Header"
import Footer from "./Footer"
import Maincontent from "./Main"

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

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

and this is my header code

export default function Header(){
    return(
    <header>
        <nav className="nav">
            <img src="./react-logo.png" className="img" />
            <ul className="nav-items">
                <li> Pricing </li>
                <li> About </li>
                <li> Contact </li>
            </ul>
        </nav>
    </header>
    )
}