Merged in fix/LOY-376-compare-levels-show-wrong-benefits (pull request #3303)

fix(LOY-376): replaced index-based key with a stable key to prevent incorrect rerenders.

* fix(LOY-376): replaced index-based key with a stable key to prevent incorrect rerenders.


Approved-by: Anton Gunnarsson
Approved-by: Linus Flood
Approved-by: Matilda Landström
Approved-by: Chuma Mcphoy (We Ahead)

apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/RewardList/index.tsx

@@ -13,7 +13,7 @@ import type { RewardListProps } from "@/types/components/overviewTable"
 export default function RewardList({ levels }: RewardListProps) {
   const keyedGroupedRewards = getGroupedRewards(levels)
 
-  return Object.values(keyedGroupedRewards).map((groupedRewards) => {
+  return Object.values(keyedGroupedRewards).map((groupedRewards, key) => {
     const rewardIdsInGroup = groupedRewards.map((b) => b.reward_id)
 
     const { label, description } = getGroupedLabelAndDescription(groupedRewards)
@@ -23,10 +23,7 @@ export default function RewardList({ levels }: RewardListProps) {
     })
 
     return (
-      <div
-        key={levelRewards[0]?.reward_id ?? ""}
-        className={styles.rewardCardWrapper}
-      >
+      <div key={key} className={styles.rewardCardWrapper}>
         <RewardCard
           title={label}
           description={description}