React keys - rendering 2 duplicate items in a list- how to avoid same key warning as same items are intended without using index as key?

Question

I have a gallery of items. 2 items will always be the same for a memory card game (remembering 2 matching images). Now if I map through I get the error that each child should have unique key since I give id as the key. 2 of the items I render, however, are exactly the same. The only way I see is to give the index as a key, which is not good.

How can I accomplish this without passing in index.

state = {
 cards: [
   {id: 132, src="example.com/hello"},
   {id: 142, src="example.com/bye"},
   {id: 132, src="example.com/hello"},
   {id: 142, src="example.com/bye"}
 ]
}
this.state.cards.map((card)=> {
  return <div key={card.id}><img src={card.src} /> <div/>
}

Answer 1

@sushant has essentially answered but here's the code

this.state.cards.map((card,index)=> {
  return <div key={index}><img src={card.src} /> <div/>
}