fix: add keys on mapped components

components/Current/Aside/Contacts/Contact.tsx

@@ -12,13 +12,13 @@ export default function Contact({ sections, system: { locale } }: ContactNode) {
   const visitingAddressMessage = getVisitingAddressMessage(locale)
   return (
     <section>
-      {sections.map((section) => {
+      {sections.map((section, idx) => {
         switch (section.__typename) {
           case Section.ContactBlockSectionsExtraInfo:
             return <p>{section.extra_info.text}</p>
           case Section.ContactBlockSectionsMailingAddress:
             return (
-              <p>
+              <p key={`section-mail-${idx}`}>
                 {section.mailing_address.name}
                 <br />
                 {section.mailing_address.street}
@@ -30,7 +30,10 @@ export default function Contact({ sections, system: { locale } }: ContactNode) {
             )
           case Section.ContactBlockSectionsPhone:
             return (
-              <div className={styles.highlightBlock}>
+              <div
+                className={styles.highlightBlock}
+                key={`section-phone-${idx}`}
+              >
                 <h3>{section.phone.title}</h3>
                 <div className={styles.phoneContainer}>
                   <svg
@@ -55,10 +58,14 @@ export default function Contact({ sections, system: { locale } }: ContactNode) {
               </div>
             )
           case Section.ContactBlockSectionsTitle:
-            return <h2 className={styles.heading}>{section.title.text}</h2>
+            return (
+              <h2 className={styles.heading} key={`section-heading-${idx}`}>
+                {section.title.text}
+              </h2>
+            )
           case Section.ContactBlockSectionsVisitingAddress:
             return (
-              <p>
+              <p key={`section-visiting-address-${idx}`}>
                 {visitingAddressMessage}: {section.visiting_address.street}{" "}
               </p>
             )