I want to be able to hover some component and display with special CSS characteristics. So, for example, if I hover on item A, i only want item A to be distinguished from the other items.

Right now I have this approach changing the element background image, this is my code:

const StatsIndicadores = () => {

    const somearray = ['10%', '50%', '60%', '60%']

    const [isHovering, setIsHovering] = useState(false)
    const [hoverStyle, setHoverStyle] = useState({})
    const [index, setIndex] = useState(0)

    const mouseEntered = (index) => {
        setIsHovering(true);
        setIndex(index + 1);
    }
    const mouseLeft = () => setIsHovering(false)


    useEffect(() => {
        if (isHovering) {
            setHoverStyle({
                background: `center url("/images/stats/rounded-images/${index}.png") no-repeat`,
                border: '1px solid #f5f5f5',
                boxShadow: '0px 0px 10px #f5f5f5',
                transition: 'all 0.3s ease-in-out'
            });
        } else {
            setHoverStyle({});
        }
    }, [isHovering]);

    return (
        <>

            {<Grid container className={style.test}>
                {
                    somearray.map((item, index) => (
                        <Grid item xs={12} md={3} key={index}>
                            <div className={style.statsContainer}>
                                <div className={style.circle} style={hoverStyle} onMouseEnter={(e) => { mouseEntered(index) }} onMouseLeave={mouseLeft}>
                                    <p className={style.circleStats}>Some value</p>
                                    <p className={`${style.circleStats} ${style.circleStatsDescription}`}>Ver más</p>
                                </div>
                                <p className={style.indicador}>Some name</p>
                            </div>
                        </Grid>
                    ))
                }
            </Grid>}
        </>
    )
}

When I hover over some item in the map, this is what I get:

I don't want to display the background image on the other circles, but I don't know how to display it only on the hovered one. I have the idea to compare the index of the hovered item and if that one is active, display the background... but I can't figure which way of doing this would be the best one.