Как задать одинаковый className при hover родительского элемента?

import styles from './Nav.module.scss';
import NavItem from "./navItems";
import React, { useState, useRef } from 'react';
import SubItems from './SubItems';



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

    const Slug =
        [
            { title: "Министерство", dataSlug: "ministerstvo", url: 'yandex.ru',subtitle: "O министерстве " },
            { title: "Документы", dataSlug: "documenty", url: 'mail.ru', subtitle: "О документах" },
            { title: "Прочее", dataSlug: "prochee", url: 'google.ru', subtitle: "О прочее" }
        ];
    
    return (
        <div className={`${styles.header} ${hovered ? `${styles.header_is_submenu}` : ''}`} onMouseEnter={toggleHover} onMouseLeave={toggleHover}>
            <div className={styles.header__nav}>
                <div className={styles.wrapper}>
                    <div className={styles.header__nav_inner}>
                        <div className={styles.header__nav_list}>
                            {Slug.map((item) =>
                                <NavItem title={item.title} slug={item.dataSlug} hovered={hovered} onHover={toggleHover} />
                            )}
                        </div>
                    </div>
                </div>
            </div>
            <div className={styles.header__subnav}>
                <div className={styles.header__submenu}>
                    <div className={styles.wrapper}>
                     {Slug.map((block) =>
                          <SubItems 
                        subtitle={block.subtitle}
                        slug={block.dataSlug}
                            />
                        )}

                        

                    </div>
                </div>
            </div>
        </div>
    );
}
export default Navigation;