fix: add keys on mapped components

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitCard/index.tsx

@@ -37,7 +37,10 @@ export default function BenefitCard({
       </div>
       <div className={styles.benefitComparison}>
         {comparedValues.map((benefit, idx) => (
-          <div key={idx} className={styles.comparisonItem}>
+          <div
+            key={`${benefit.valueDetails}-${idx}`}
+            className={styles.comparisonItem}
+          >
             <BenefitValue benefit={benefit} />
           </div>
         ))}

components/Loyalty/Blocks/DynamicContent/OverviewTable/BenefitList/index.tsx

@@ -29,8 +29,9 @@ export default function BenefitList({ levels }: BenefitListProps) {
           <BenefitCard
             title={benefit.name}
             description={benefit.description}
-            comparedValues={levelBenefits.map((benefit) => {
+            comparedValues={levelBenefits.map((benefit, idx) => {
               return {
+                key: `${benefit.name}-${idx}`,
                 value: benefit.value,
                 unlocked: benefit.unlocked,
                 valueDetails: benefit.valueDetails,