is there a way to target each image from the array individually in order to make them highlight when clicked?

I’m trying to get the logos highlighted some way whenever a user has clicked on them so they will know exactly on which card they are actively on. I have no clue how to do this. any suggestions will be incredibly appreciated!

---

const professions = [
 {
   circular: <CircularProgressbar value= "99" text={`99%`} 
   styles={buildStyles({
    // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
    strokeLinecap: 'butt',
    // Text size
    textSize: '16px',
    // How long animation takes to go from one percentage to another, in seconds
    pathTransitionDuration: 1.5,
    // Colors
    pathColor: `rgba(16, 38, 71, ${99 / 100})`,
    textColor: '#102647',
    trailColor: '#e0e0eb',
    backgroundColor: '#3e98c7',
  })}
  /> ,
   git:<FaGitAlt/>,
   industrycon: <IoRocketSharp alt="Space Rocket"/> ,
   key: "card1",
   project:"SAFE ZONE",
   icon: <FaRegEye alt="ComNatural Language processing-logo" />,
   percentage: 99,
   specialty: "CV - DATA ANALYTICS ",
   industry:" Gases Clinicos",
   summary:"Compliance del 99% de normas sanitarias para operación en pandemia , identifiacando dist. social, aforo y mascarilla.",
   logo: <img className="logus Mediumsquare" src={imgrep(1)} alt="altofem" />
 },


 { 
   circular: <CircularProgressbar value= "40" text={`40%`} 
   styles={buildStyles({
    // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
    strokeLinecap: 'butt',
    // Text size
    textSize: '16px',
    // How long animation takes to go from one percentage to another, in seconds
    pathTransitionDuration: 1.5,
    // Colors
    pathColor: `rgba(16, 38, 71, ${40 / 100})`,
    textColor: '#102647',
    trailColor: '#e0e0eb',
    backgroundColor: '#3e98c7',
  })}
  /> ,
   key: "card2",
   industrycon: <IoRocketSharp alt="Space Rocket"/>,
   git:<FaGitAlt/>,
   project:"Automatización EEPP-forecasting",
   icon: <GiProcessor alt="Natural Language processing-logo"/>,
   specialty: "NLP- Data analytics ",
   industry: "Constructora Inmobiliaria",
   summary: "Automatización en estados de pago con NLP",
   logo: <img className="logus Biground" src={imgrep(2)} alt="vimac" />,
 },


 {
   circular: <CircularProgressbar value= "96" text={`96%`} 
   styles={buildStyles({
    // Whether to use rounded or flat corners on the ends - can use 'butt' or 'round'
    strokeLinecap: 'butt',
    // Text size
    textSize: '16px',
    // How long animation takes to go from one nother, in seconds
    pathTransitionDuration: 1.5,
    // Colors
    pathColor: `rgba(16, 38, 71, ${96 / 100})`,
    textColor: '#102647',
    trailColor: '#e0e0eb',
    backgroundColor: '#3e98c7',
  })}
  /> ,
   key: "card3",
   industrycon: <IoRocketSharp alt="Space Rocket"/>,
   git:<FaGitAlt/>,
   project:"Diagnoticos de CV",
   icon:<BsFileEarmarkText alt="Text Icon"/> ,
   specialty: "NLP",
   industry: "Recursos Humanos",
   summary:"Un Ahorro del 96% del tiempo total gastado en diagnósticos de CV",
   logo: <img  className="logus Mediumsquare" src={imgrep(3)} alt="peopleparnerts" />,
 }
];

const [myProfession, setMyProfession] = useState("");
const[seeF, setSeef]= useState(true);
const[stepOn, setStepOn]= useState(false);


//function to set showf to false, so it wont be rederized
function showF(){
 if(seeF)
 {
  setSeef(false)
  setStepOn(true)
 }
}

//function to target the logos
function light(){
console.log("clicked");  
}

return (

  <>
   {/* INFORMATION CARDS */}
   <Container> 
     <LeftSide>
       <Bottom>
        {seeF ? <FrontCard/> : null}
         {(professions) && (
       <Cards 
       circular={myProfession.circular}
       project={myProfession.project}
       icon={myProfession.icon}
       percentage={myProfession.percentage} 
       specialty= {myProfession.specialty}
       industry={myProfession.industry}
       summary={myProfession.summary}
       git={myProfession.git}
       industrycon={myProfession.industrycon}
        />       
         )}    
         
         {professions.map((profession) => ( 
           <info
           circular={profession.circular}
           project={profession.project}
           icon={profession.icon}
           git={profession.git}
           industrycon={profession.industrycon}
           percentage={profession.percentage}
           specialty={profession.specialty}
           industry={profession.industry}
           summary={profession.summary}
           className={profession.logo.props.className}
           src={profession.logo.props.src}
           onMouseEnter={() => setMyProfession(profession.logo.props.alt)}/>
         ))}
       </Bottom>
     </LeftSide>
     {/* HOVERING LOGOS */}
     <RightSide onClick= {()=> showF()}>
       <h2> Nuestros Casos de Exito </h2>
       <br />
       <Buttons>
         {professions.map((profession) => (
           <>
             <img 
               type="img"
               key={profession}
               id={profession.logo.props.id}
               src={profession.logo.props.src}
               className={profession.logo.props.className}
               onClick={() => {setMyProfession(profession); light();}}
             ></img>
           </>
         ))}
       </Buttons>
     </RightSide>
   </Container>
 </>
);
};

export default ShowAndHide;

this is how it looks right now, but nobody is able to tell which company’s info is rendered right now