fix: add keys on mapped components

components/Loyalty/Blocks/WebView/index.tsx

@@ -14,10 +14,15 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
     const firstItem = idx === 0
     switch (block.__typename) {
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksCardsGrid:
-        return <CardsGrid cards_grid={block.cards_grid} />
+        return (
+          <CardsGrid
+            key={`${block.cards_grid.title}-${idx}`}
+            cards_grid={block.cards_grid}
+          />
+        )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksContent:
         return (
-          <section>
+          <section key={`${block.__typename}-${idx}`}>
             <JsonToHtml
               nodes={block.content.content.json.children}
               embeds={block.content.content.embedded_itemsConnection.edges}
@@ -39,6 +44,7 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
           <DynamicContentBlock
             dynamicContent={dynamicContent}
             firstItem={firstItem}
+            key={`${block.dynamic_content.title}-${idx}`}
           />
         )
       case LoyaltyBlocksTypenameEnum.LoyaltyPageBlocksShortcuts:
@@ -49,6 +55,7 @@ export function Blocks({ lang, blocks }: BlocksProps & LangParams) {
         return (
           <Shortcuts
             firstItem={firstItem}
+            key={`${block.shortcuts.title}-${idx}`}
             shortcuts={shortcuts}
             title={block.shortcuts.title}
             subtitle={block.shortcuts.preamble}