Component not getting render when importing from folder

I am trying to render a component which is in another folder called “Component” but the component are not getting render when importing them from this folder and when I am creating component in index.js it got render.Header not getting render and sometimes ChallengeOne not getting render
my code

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";

import Content from "./component/Content";
// import ChallengeOne from "./component/ChallengeOne";
import ChallengeTwo from "./component/ChallengeTwo";
// import ChallengeTwo from "./component/ChallengeTwo";
// import Page from "./component/Challenge Three/Page";
const Header=()=>{
  <>
  <h1>Reason I'm exicted to learn react</h1>
  </>
}
const ChallengeOne =()=>{
  return(
      <nav>
          <h1>DRY FRUIT CENTER</h1>
          <ul>
              <li>Price</li>
              <li>About</li>
              <li>Contact</li>
          </ul>
      </nav>
  )
}
ReactDOM.render(
  <React.StrictMode>
    <ChallengeOne/>
    <ChallengeTwo/>
    <Content />
    <Header/>
   </React.StrictMode>,
  document.getElementById("root")
);