fix: correct OverviewTable createComparison function

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

@@ -1,6 +1,6 @@
 "use client"
 
-import { useState } from "react"
+import { Fragment, useState } from "react"
 import { Minus } from "react-feather"
 
 import { Lang } from "@/constants/languages"
@@ -62,12 +62,10 @@ function OverviewTableTitle({ texts }: OverviewTableTitleProps) {
   return (
     <Title as="h1" level="h1" weight="semiBold" uppercase>
       {texts.map(({ text, highlight }, idx) => (
-        <>
-          <span key={idx} className={highlight ? styles.highlight : ""}>
-            {text}
-          </span>
+        <Fragment key={idx}>
+          <span className={highlight ? styles.highlight : ""}>{text}</span>
           {idx < texts.length - 1 && " "}
-        </>
+        </Fragment>
       ))}
     </Title>
   )
@@ -80,17 +78,23 @@ function getLevelByTier(tier: number) {
 }
 
 function createComparison(levelA: ComparisonLevel, levelB: ComparisonLevel) {
-  const comparedLevels = [levelA, levelB].sort(
-    (a, b) => a.benefits.length - b.benefits.length
+  const unlockedBenefitsA = levelA.benefits.filter(
+    (benefit) => benefit.unlocked
   )
+  const unlockedBenefitsB = levelB.benefits.filter(
+    (benefit) => benefit.unlocked
+  )
+
+  const higherLevelBenefits =
+    unlockedBenefitsA.length > unlockedBenefitsB.length
+      ? unlockedBenefitsA
+      : unlockedBenefitsB
 
   return (
     <>
-      {comparedLevels[1].benefits
-        .filter((benefit) => benefit.unlocked)
-        .map((benefit, idx) => {
-          const aBenefit = comparedLevels[0].benefits[idx]
-          const bBenefit = comparedLevels[1].benefits[idx]
+      {higherLevelBenefits.map((benefit, idx) => {
+        const aBenefit = levelA.benefits[idx]
+        const bBenefit = levelB.benefits[idx]
         return (
           <BenefitCard
             key={benefit.name}