How can i hover in React using useState

November 7, 2021

I wanna toggle a class when hovering on a Container by changing the opacity from 0 to 1, I’ve used onmouseEnter and onMouseLeave Event to toggle the class, but when I console hover state I see that is changing from true to false when I hover but the class "Show" is not changing.
What do you think ?

<–Components–>

import React,{useState} from 'react';
import './MyWork.css';
import {Visibility, GitHub } from "@material-ui/icons";


const SingleProject = ({src, title}) => {
    const [hover, isHover] = useState(false);
    const showIcons = isHover ? "Show" : "";

    return (
        <div className="card-container" onMouseEnter={()=> isHover(true)} onMouseLeave={()=> isHover(false)}>
            <img src={src} alt={title}/>
            <h1 id="card-title">{title}</h1>
           <div className={`Info ${showIcons}`}>

                <div className="Icon">
                    <GitHub/>
                </div>

                <div className="Icon">
                    <Visibility/>
                </div>

            </div>
        </div>
    )
}


export default SingleProject;

<— Css—>

.card-container {
    height: 314px;
    width: 500px;
    cursor: pointer;
    position : relative;
}
.Info {
    position: absolute;
    height: 100%;
    width: 100%;
    top:0;
    left:0;
    display:flex;
    justify-content:center;
    align-items: center;
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 0;
}

.Info.Show {
    opacity: 1;
}