I have an array of objects file and displaying data on frontend side & I applied on a onClick function on that data which I am fetching, but the issue is when click on that button I get last array of object value but I want that specific data, data file -

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

my code -

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; 

Popup code -

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;