React: Card component share same state - reactjs

Question

Created RenderCard component which creates multiple cards for given data.
I am creating bulk selection of card means selecting multiple cards. So when user click on circle present at the top left then that circle become check circle
So here the issue is that all card gets selected when user click on any card. So I want only that card select which users click
const Card = () => {
const [cardSelect, setCardSelect] = useState(false)
const onMouseEnter = () => {
console.log("onMouseEnter1")
}
const onMouseLeave = () => {
console.log("onMouseLeave1")
}
const logMessage = () => {
setCardSelect(prevCheck => !prevCheck);
}
const RenderCard = () => {
return album.map(item => {
return (
<Col className='container' onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave} key={item.title} md='2'>
<Card>
<div>
<Link to={`/pages/blog/detail/${item.id}`}>
<CardImg className='img-fluid image' src={item.img} alt={item.title} top />
</Link>
</div>
<div className='select-card'>
{cardSelect ? <CheckCircle onClick={logMessage} /> : <Circle onClick={logMessage} />}
</div>
<CardBody>
<CardTitle className="image2 te" >
<b>{item.title}</b>
</CardTitle>
<CardText>{item.comment} Comments</CardText>
</CardBody>
</Card>
</Col>
)
})
}
return (
<>
<Row>
<RenderCard />
</Row>
</>
)
}
Anyone can point me in the right direction where I am doing mistakes.
Thanks

Answer 1

If i understand you correctly i would suggest that
you should wrap anything that is inside the return statement and refactor it to its own component, and then pass item as prop in that component and make the clickhandler inside that component. like this:
const RenderCard = () => {
return album.map(item => {
return ( <Component item={item} />)
}
Now the component have its own state that shows either its clicked or not clicked

Answer 2

With this line of code :
cardSelect ? <CheckCircle onClick={logMessage} /> : <Circle onClick={logMessage} />
You are saying : "If cardSelect is true, then render CheckCircle component, otherwise, render Circle component and do that for all items in album list". So when the state changes, it will render only one type of object CheckCircles, or Circles as many times as there are elements in the album list for which you are calling the map method.
That is why you are seeing all checked circles when you set your variable cardSelect to true.