Tengo una matriz de archivos de objetos y visualizo datos en el lado frontal y apliqué una función onClick en los datos que estoy obteniendo, pero el problema es que cuando hago clic en ese botón obtengo la última matriz de valor de objeto pero quiero esa información específica , archivo de datos -

 const Data = [ { id: 1, HEXCode: "#FF6263", RGBACode: "rgba(255, 98, 99, 1)", }, ........ ]

mi código -

 const HashCode = () => { const [redvalue, setRedValue] = useState(Data); const [ButtonPopup, setButtonPopup] = useState(false); return ( <Wrap> <Home code={"Hash Code"} link={"/"} link2={"/RGBCode"} link3={"/Gradients"} link4={"/TwoColorCombination"} /> <Content> {redvalue.map((element, index) => { return ( <div key={index}> <Button type="button" style={{ background: `${element.HEXCode}` }} onClick={() => setButtonPopup(true)} > {element.HEXCode} </Button> <Popup trigger={ButtonPopup} setTrigger={setButtonPopup}> <CopyToClipboard text={element.HEXCode}> <button type="btn">{element.HEXCode}</button> </CopyToClipboard> <CopyToClipboard text={element.RGBACode}> <button type="btn">{element.RGBACode}</button> </CopyToClipboard> </Popup> </div> ); })} </Content> </Wrap> ); }; export default HashCode;

Código emergente -

 const Popup = (props) => { return props.trigger ? ( <Wrap className="popup"> <div className="popup_inner"> <button className="close_btn" onClick={() => props.setTrigger(false)}> close </button> {props.children} </div> </Wrap> ) : ( "" ); }; export default Popup;