fix: avoid using array index as keys

Author: mhenriette

src/components/cards/challenge/Challenge.tsx

@@ -66,9 +66,9 @@ export default function ChallengeCard({ data, community, isCourseEnd }: Challeng
           <Image src={data?.certificateData?.icon} alt="achievement" fill />
         </div>
         <div className="">
-          <h1 className="font-bold text-gray-400 text-xs">{t("communities.overview.challenge.unlock.certificate").toUpperCase()}</h1>
-          {data?.rewards.map((reward, index) => (
-            <div key={index} className="flex items-center md:gap-1 border-b border-gray-200 py-2">
+          <h1 className="font-bold text-gray-400 text-xs uppercase">{t("communities.overview.challenge.unlock.certificate")}</h1>
+          {data?.rewards.map((reward) => (
+            <div key={reward.id} className="flex items-center md:gap-1 border-b border-gray-200 py-2">
               <Coin size="small" token={reward?.token} />
               <div className="text-sm">
                 <span>

src/components/sections/challenges/Rewards.tsx

@@ -30,7 +30,7 @@ export function OverviewRewards(): ReactElement {
           <div className="flex flex-col w-full lg:w-1/2">
             {challenge?.rewards.map((reward, index, rewardsArray) => (
               <div
-                key={index}
+                key={reward.id}
                 className={`flex items-center gap-1 pb-2 ${index !== (rewardsArray.length !== 1 && rewardsArray.length - 1) ? "border-b border-gray-200" : ""} ${
                   index !== 0 ? "pt-2" : ""
                 } `}