I am displaying cards from an array of objects with map, and I would like to show only onMouse enter some icons, but only on the card where mouse is hover. Right now, icons show on all card

const onMousseEnter = (index) => {
   if (index === interestsList[index].id) {
     setVisibility(true);
   } 
 };

{interestsList
      .sort((a, b) => (a.name < b.name ? -1 : a.name > b.name ? 1 : 0))
      .map((el, index) => (
        <InterestCard
          key={index}
          onMouseEnter={() => onMousseEnter(index)}
          onMouseLeave={() => onMouseLeave(index)}>
          <CategoryLeftCol onClick={openCatPage(index)}>
            <SurfingRoundedIcon sx={{ fontSize: 22 }} />
            <Typography variant="h6" fontWeight="bold">
              {el.name}
            </Typography>
          </CategoryLeftCol>
          {visible && (
            <CategoryRightCol>
              <IconButton onClick={() => setOpen(true)}>
                <Edit sx={{ fontSize: 14 }} />
              </IconButton>
              <IconButton onClick={() => setOpenAlert(true)}>
                <Delete sx={{ fontSize: 14 }} />
              </IconButton>
            </CategoryRightCol>
          )}

I can get the index of the card where mouse is hover but problem persist…

>Solution :

className="interestCard" // for <InterestCard/>
...
className="interestCard_icons" // for <CategoryRightCol/> i guess

css:

.interestCard_icons {
    opacity: 0;
    pointer-events: none; 
    transition: opacity 0.3s;
}
.interestCard:hover .interestCard_icons {
    opacity: 1;
    pointer-events: auto;
}