Как передать state дочернему элементу?

Question

[CHtommy]

Немного не могу понять, как правильно передать callback между файлами...Читал доку и смотрел видео и все равно не догоняю...
Передать нужно именно hovered из родительского к дочернему. Если родитель hovered, то дочерний должен тоже активироватся и отдавать className
Родитель:

function NavItem(props) {
 
    const [hovered, setHovered] = useState(false);
    const toggleHover = () => setHovered(!hovered);
   

    return (
        <div className={`${styles.header__nav_item} ${hovered ? ' header__nav_item_active' : ''}`} onMouseEnter={toggleHover} onMouseLeave={toggleHover}>
            <a className = {styles.header__nav_link} data-slug = {`${"slug-"}${props.slug}`} href = {props.url}>
                {props.title}
            </a>
        </div>
    );

} export default NavItem;

Ребенок:

function navItemSubmenu(props) {

    return (
        <div className={`${styles.header__nav_item} ${props.hovered ? 'header__submenu_inner_active' : ''}`} data-slug = {`${"slug-"}${props.dataSlug}`} >
            <div className={styles.header__submenu_col}>
                <div className={styles.header__submenu_item}>
                    <div className={styles.header__submenu_title}>
                        <div>{props.subtitle}</div>
                    </div>
                    <div className={styles.header__submenu_list}>
                        <div className={styles.header__submenu_list_item}>
                            <a className={styles.header__submenu_list_link} href="/ministerstvo/o-ministerstve/obschie-svedeniya/">
                                Общие сведения
                            </a>
                        </div>
    );
} export default navItemSubmenu;