Estoy mapeando los elementos 'MemeCard.js' dentro de 'Home.js' usando la función 'mapa' de ReactJs.

En Home.js, el mapeo de elementos se hace así

 memes = ["url1","url2","url3","url4"]; return ( <div className="container my-3"> <div className="row"> {memes.map((meme, index) => { return ( <div className="col-xl-4 my-5"> <MemeCard imgurl={meme} index={index} /> </div> ); })} </div> </div> );

Mi elemento MemeCard es

 import React from 'react'; import MemeCSS from './MemeCard.module.css'; import whiteHeart from '../images/bordered_heart.png'; import blueHeart from '../images/blue_heart.png'; import Share from '../images/share.png'; export default function MemeCard(props) { function likeBtnClicked(index){ document.getElementById("heartIMG").setAttribute("src",blueHeart); console.log(index); } return ( <div className={MemeCSS.box}> <img className={MemeCSS.memeImg} src={props.imgurl} alt="meme" /> <div className={MemeCSS.divbutton}> <img className={MemeCSS.shareImg} src={Share} alt="share" /> <img id="heartIMG" className={MemeCSS.likeImg} onClick={()=>{likeBtnClicked(props.index);}} src={whiteHeart} alt="like" /> </div> </div> ); }

Lo que quiero hacer es: cambiar la imagen 'likeImage' de la imagen 'whiteHeart' a 'blueHeart' (ambos los he importado), cuando se hace clic en la imagen 'whiteHeart' usando 'onClick'. Pero, no importa en qué imagen 'whiteHeart' de 'MemeCard' haga clic, el código cambia solo la imagen del primer elemento a 'blueHeart'. Porque solo obtiene el "document.getElementById("heartIMG")" del primer elemento cada vez. Pero el índice está imprimiendo el índice del elemento correcto (en el que se hace clic).

Alguien me puede decir como solucionar este problema?