Necesito ayuda en una situación de reacción JS:

(perdón por el inglés, no es mi idioma nativo, espero que quede claro)

Creé un modal que se supone que debe obtener la información de un automóvil, así que mapeo mis datos, obtengo todos los elementos. Entonces me gustaría: al hacer clic en uno de los elementos, se abre el modal con la información del automóvil en el que acabo de hacer clic. pero en cambio mantiene la misma información (el último auto "mapeado").

Traté de usar la clave de índice... o la identificación, pero no puedo acceder a lo que quiero.

¿Alguna idea de por qué?

aquí mi código

 data.map((offer, index) => { // console.log("offers map ---->", offer); return ( <div key={offer.id}> <div> <p>{offer.headlines.description}</p> </div> <div> <img src={offer.images.small} alt="picture" onClick={() => { setShowModal(true); }} /> <ModalCar title={offer.headlines.description} configuration={offer.carGroupInfo} image={offer.images} onClose={() => { setShowModal(false); }} show={showModal} /> </div>

aquí mi modal

 const ModalCar = (props) => { console.log("props modal---->", props); if (!props.show) { return null; } return ( <div className="modal"> <div className="modal-content"> {/* <img src={image.large} alt="" /> */} <div className="modal-header"> <h1 className="modal-title">{props.title}</h1> </div> <div className="modal-body">this is modal content</div> <div className="modal-footer"> <button onClick={props.onClose} className="button-modal"> Close </button> </div> </div> </div> ); }; export default ModalCar;