⚡️(frontend) memoize the ActiveSpeaker component

Memoize the ActiveSpeaker component used in the push-to-talk
component so it does not re-render on unrelated parent updates when
its props have not changed.

src/frontend/src/features/rooms/components/ActiveSpeaker.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { styled } from '@/styled-system/jsx'
 
 const StyledContainer = styled('div', {
@@ -67,35 +68,36 @@ export type ActiveSpeakerProps = {
   pushToTalk?: boolean
 }
 
-export const ActiveSpeaker = ({
+export const ActiveSpeaker = React.memo(
-  isSpeaking,
+  ({ isSpeaking, pushToTalk }: ActiveSpeakerProps) => {
-  pushToTalk,
+    return (
-}: ActiveSpeakerProps) => {
+      <StyledContainer pushToTalk={pushToTalk}>
-  return (
+        <StyledChild
-    <StyledContainer pushToTalk={pushToTalk}>
+          pushToTalk={pushToTalk}
-      <StyledChild
+          active={isSpeaking}
-        pushToTalk={pushToTalk}
+          size="small"
-        active={isSpeaking}
+          style={{
-        size="small"
+            animationDelay: '300ms',
-        style={{
+          }}
-          animationDelay: '300ms',
+        />
-        }}
+        <StyledChild
-      />
+          pushToTalk={pushToTalk}
-      <StyledChild
+          active={isSpeaking}
-        pushToTalk={pushToTalk}
+          style={{
-        active={isSpeaking}
+            animationDelay: '100ms',
-        style={{
+          }}
-          animationDelay: '100ms',
+        />
-        }}
+        <StyledChild
-      />
+          pushToTalk={pushToTalk}
-      <StyledChild
+          active={isSpeaking}
-        pushToTalk={pushToTalk}
+          size="small"
-        active={isSpeaking}
+          style={{
-        size="small"
+            animationDelay: '500ms',
-        style={{
+          }}
-          animationDelay: '500ms',
+        />
-        }}
+      </StyledContainer>
-      />
+    )
-    </StyledContainer>
+  }
-  )
+)
-}
+
+ActiveSpeaker.displayName = 'ActiveSpeaker'