카드 개별 속성 변경

클릭된 카드의 색상을 변경하고 싶은데, 제가 한 거는 모든 카드의 색상이 변경되더라구요.

클릭된 하나의 개별 카드의 속성만 변경하려면 어떻게 해야할까요?

getElementById로 해보려니까 맨 첫번 째 카드만 변경되구요.. 

  const [Color, setColor]=useState({

      color:'#FFFFF'

  });





var msg

  const getbadgepathhandler = (event) => {

    event.preventDefault();

     msg = event.target.getAttribute('data-msg')

    console.log("event target data : ",event.target);

    console.log("msg: "+ msg )

    document.getElementById('clicked').style.backgroundColor='#DAF7A6'

    // document.backgroundColor='#DAF7A6'

    // document.getElementsByName('clicked').style.backgroundColor='#DAF7A6'

     const style=event.target.getAttribute('style')

    console.log(style)

    setColor((Color)=>({

        ...Color,

        color: '#DAF7A6',

    }))



  }



.

.

.

   const renderCards = Badges.map((badge, index) => {

      return <Col lg={6} md={8} xs={12} key={index}>

          <Card

              hoverable={true} 

            //    cover={<a href={`/badge/${badge.CLS_badgePath}`} ></a>}

              cover={<img style={{width:'100%', maxHeight:'150px', backgroundColor: Color.color }} id='clicked' src={`http://114.70.21.121:3000${badge.CLS_badgePath}`} onClick={getbadgepathhandler} data-msg={badge.SEQ}

              />}

            //   

          >

              <Meta

                  title={badge.CLS_title}

                  description={`${badge.CLS_subjectName}`}

              />

              <br/>

                <p className="level">Level: {`${badge.CLS_level}`}</p>

                <p>Authenticator: {`${(JSON.parse(badge.CLS_authenticator)).authName}`}</p>

          </Card>

      </Col>

  })