"fixed" some keys in loops

src/components/Card.tsx

@@ -27,7 +27,9 @@ const CardComp: React.FC<Props> = ({card,side,onChange,onRemove}) => {
             </div>
             <div className="border border-red-500">
                 {card.items.map((item,i)=>
-                    <div key={i}>
+                    <div 
+                        key={item + i} // FIXME: this is just a "temporary" solution. Implement propper key
+                    >
                         {ItemToDisplay(item,side)} <span onClick={()=>{
                             onChange?.(new Card(card.title,card.armor,card.helmet,...card.items.filter((_,fi)=>i!==fi)))
                         }} className="float-right cursor-pointer" >X</span>

src/components/CardGroup.tsx

@@ -21,7 +21,10 @@ const CardGroupComp: React.FC<Props> = ({cardGroup,side,onChange,onRemove}) => {
 			/>
 			<div className="flex">
 				{cardGroup.cards.map((card,index) => 
-					<CardComp key={index} card={card} side={side}
+					<CardComp 
+						key={card.toString() + index} // FIXME: this is just a "temporary" solution. Implement propper key
+						card={card}
+						side={side}
 						onChange={(newCard)=>{
 							onChange?.(new CardGroup(
 								cardGroup.numInDeck,

src/components/Deck.tsx

@@ -24,7 +24,10 @@ const DeckComp: React.FC<Props> = ({deck,side,title,onChange}) => {
                 /> </span> }
             <div className="flex">
                 {deck.cardGroups.map((group,index) =>
-                    <CardGroupComp key={index} cardGroup={group} side={side} 
+                    <CardGroupComp 
+                        key={group.toString() + index} // FIXME: this is just a "temporary" solution. Implement propper key
+                        cardGroup={group}
+                        side={side} 
                         onChange={(newGroup)=>{
                             onChange?.(new Deck(
                                 deck.numDefusers,