Menu hover React

[_marlon307 1]

Boa noite. Bom Dia.

Estou com um problema com meu menu hover em React. quando eu passo o mouse em cima do elemnto para abrir o menu le renderiza todas as abas e quando passo o mouse sobre o menu ele fica bugado.

 

import React, { useState } from 'react';

import { Link } from 'react-router-dom';

//import DropModMn from '../../Helper/DropModMn';

import { ReactComponent as Respponse } from '../../icons/respponse.svg';

import styles from '../css/search.module.css';

import SubMenuCtg from './SubMneu/SubMenuCtg';

 

const Search = () => {

 

    const menu = [

        {

            nctg: 'Masculino',

            ctg: ['Categoria', 'Categoria', 'Categoria 3', 'Categoria 4', 'Categoria 5'],

        },

        {

            nctg: 'Femenino',

            ctg: ['Categoria 3', 'Categoria 4', 'Categoria 5', 'Categoria 6', 'Categoria 7'],

        },

        {

            nctg: 'Criança',

            ctg: ['Categoria 8', 'Categoria 9', 'Categoria 10', 'Categoria 11', 'Categoria 12'],

        },

        {

            nctg: 'Acessórios',

            ctg: ['Categoria 13', 'Categoria 14', 'Categoria 15', 'Categoria 16', 'Categoria 17'],

        },

        {

            nctg: 'Promoção',

            ctg: ['Categoria 18', 'Categoria 19', 'Categoria 20', 'Categoria 21', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22', 'Categoria 22'],

        }  

    ];

 

   const [expand, setExpand] = useState(false);

 

    function MouseOver(event){

        event.preventDefault();

        

        console.log(event);

 

        if(expand) setExpand(!expand);

        else setExpand(!expand);

    }

 

    return (

 

        <nav className={styles.search}>

 

            <div className={styles.ct}>

                <Link to="/" className={styles.index}>

                    <Respponse aria-label="Respponse"/>

                </Link>  

            </div>

 

            <div className={styles.ct}>

 

                <ul className={styles.ldep}>

 

                    {menu.map((m) =>

                        

                        <li className={styles.ictg} key={m.nctg} onMouseOver={MouseOver} onMouseLeave={MouseOver}>

 

                            <Link className={`${styles.lctg} imh`} to={m.nctg}>{m.nctg}</Link>

                            

                            <SubMenuCtg gl={m.ctg} exp={expand} />  

                        

                        </li>

                    )}

                    

                </ul>

            </div>

        </nav>

    )

}

 

export default Search