🚨(frontend) resolve key prop warning in ParticipantListItem

Key prop was incorrectly passed down as a regular prop to ParticipantListItem
instead of being used at the array mapping level. Key is a special React prop
for list rendering and cannot be accessed as a component prop.

src/frontend/src/features/rooms/livekit/components/controls/Options/OptionsMenuItems.tsx

@@ -3,7 +3,7 @@ import {
   RiMegaphoneLine,
   RiSettings3Line,
 } from '@remixicon/react'
-import { MenuItem, Menu as RACMenu, Section } from 'react-aria-components'
+import { MenuItem, Menu as RACMenu, MenuSection } from 'react-aria-components'
 import { useTranslation } from 'react-i18next'
 import { Separator } from '@/primitives/Separator'
 import { useSidePanel } from '../../../hooks/useSidePanel'
@@ -23,7 +23,7 @@ export const OptionsMenuItems = () => {
         width: '300px',
       }}
     >
-      <Section>
+      <MenuSection>
         <MenuItem
           onAction={() => toggleEffects()}
           className={menuRecipe({ icon: true }).item}
@@ -31,9 +31,9 @@ export const OptionsMenuItems = () => {
           <RiAccountBoxLine size={20} />
           {t('effects')}
         </MenuItem>
-      </Section>
+      </MenuSection>
       <Separator />
-      <Section>
+      <MenuSection>
         <MenuItem
           href={GRIST_FORM}
           target="_blank"
@@ -49,7 +49,7 @@ export const OptionsMenuItems = () => {
           <RiSettings3Line size={20} />
           {t('settings')}
         </MenuItem>
-      </Section>
+      </MenuSection>
     </RACMenu>
   )
 }

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantListItem.tsx

@@ -118,7 +118,6 @@ export const ParticipantListItem = ({
     <HStack
       role="listitem"
       justify="space-between"
-      key={participant.identity}
       id={participant.identity}
       className={css({
         padding: '0.25rem 0',

src/frontend/src/features/rooms/livekit/components/controls/Participants/ParticipantsList.tsx

@@ -56,7 +56,10 @@ export const ParticipantsList = () => {
             heading={t('raisedHands')}
             participants={raisedHandParticipants}
             renderParticipant={(participant) => (
-              <HandRaisedListItem participant={participant} />
+              <HandRaisedListItem
+                key={participant.identity}
+                participant={participant}
+              />
             )}
             action={() => (
               <LowerAllHandsButton participants={raisedHandParticipants} />
@@ -68,7 +71,10 @@ export const ParticipantsList = () => {
         heading={t('contributors')}
         participants={sortedParticipants}
         renderParticipant={(participant) => (
-          <ParticipantListItem participant={participant} />
+          <ParticipantListItem
+            key={participant.identity}
+            participant={participant}
+          />
         )}
       />
     </Div>