How do I pass props to a function component in TypeScript? I am receiving an error that it's type is not a valid JSX element type

Error:
Type '{ activeHeader: boolean; activeMenu: boolean; }' is not assignable to type 'IntrinsicAttributes & boolean'.

'MobileHeader' cannot be used as a JSX component. Its type '(activeHeader: boolean, activeMenu: boolean) => Element' is not a valid JSX element type. Type '(activeHeader: boolean, activeMenu: boolean) => Element' is not assignable to type '(props: any) => ReactNode | Promise<ReactNode>'. Target signature provides too few arguments. Expected 2 or more, but got 1.

Code:

import { useState } from 'react'; interface MobileHeaderProps { activeHeader: boolean; activeMenu: boolean; } function MobileHeader(activeHeader: boolean, activeMenu: boolean) { console.log("Active Header: " + activeHeader); return ( <header className="[ grid ] [ p-5 ] [ min-h-[650px] w-screen ] [ bg-[url(assets/images/mobile/image-hero.jpg)] bg-center bg-cover bg-no-repeat ]"> <section hidden={!(activeHeader)} aria-hidden={!(activeHeader)} className="[ flex flex-row items-center justify-between ] [ h-min ]"> <p className="[ text-white text-left ] [ font-medium ]">loopstudios</p> <button className="[ rounded-sm p-1 ] [ hover:cursor-pointer hover:bg-indigo-500 ]" aria-label="drop-down menu"><img src={hamburgerIcon} /></button> </section> <nav hidden={!(activeMenu)} aria-hidden={!(activeMenu)}> <ul> <li>About</li> <li>Careers</li> <li>Events</li> <li>Products</li> <li>Support</li> </ul> </nav> <h1 hidden={!(activeHeader)} aria-hidden={!(activeHeader)} className="[ self-start ] [ uppercase text-4xl text-left text-slate-300 tracking-wider font-light ] [ p-5 ] [ border-2 border-slate-300 ]">Immersive experiences that deliver</h1> </header> ); } export default function App(prop: MobileHeaderProp) { const [activeHeader, setActiveHeader] = useState(true); const [activeMenu, setActiveMenu] = useState(false); return ( <MobileHeader activeHeader={prop.activeHeader} activeMenu={prop.activeMenu} /> ) }

I am new to TypeScript and I am trying to reference the official docs for clarifications. However, I'm not very familiar with the nuances that come with TypeScript and I am wondering why I'm not able to pass props to this function component as I normally would in JavaScript. I tried utilizing an interface to define the types, as an attempt to follow the examples in the docs but it didn't remedy the issue I am having.

In this program I am trying to call the function component MobileHeader within App, but it prevents the program from running properly due to the flagged error.