diff --git a/src/frontend/src/features/notifications/components/ToastRegion.tsx b/src/frontend/src/features/notifications/components/ToastRegion.tsx
index 8351ab36..09ea4dad 100644
--- a/src/frontend/src/features/notifications/components/ToastRegion.tsx
+++ b/src/frontend/src/features/notifications/components/ToastRegion.tsx
@@ -1,5 +1,5 @@
 import { AriaToastRegionProps, useToastRegion } from '@react-aria/toast'
-import type { ToastState } from '@react-stately/toast'
+import type { QueuedToast, ToastState } from '@react-stately/toast'
 import { Toast } from './Toast'
 import { useRef } from 'react'
 import { NotificationType } from '../NotificationType'
@@ -14,31 +14,39 @@ interface ToastRegionProps extends AriaToastRegionProps {
   state: ToastState<ToastData>
 }
 
+const renderToast = (
+  toast: QueuedToast<ToastData>,
+  state: ToastState<ToastData>
+) => {
+  switch (toast.content?.type) {
+    case NotificationType.ParticipantJoined:
+      return <ToastJoined key={toast.key} toast={toast} state={state} />
+
+    case NotificationType.HandRaised:
+      return <ToastRaised key={toast.key} toast={toast} state={state} />
+
+    case NotificationType.ParticipantMuted:
+      return <ToastMuted key={toast.key} toast={toast} state={state} />
+
+    case NotificationType.MessageReceived:
+      return (
+        <ToastMessageReceived key={toast.key} toast={toast} state={state} />
+      )
+
+    case NotificationType.LowerHand:
+      return <ToastLowerHand key={toast.key} toast={toast} state={state} />
+
+    default:
+      return <Toast key={toast.key} toast={toast} state={state} />
+  }
+}
+
 export function ToastRegion({ state, ...props }: ToastRegionProps) {
   const ref = useRef(null)
   const { regionProps } = useToastRegion(props, state, ref)
   return (
     <div {...regionProps} ref={ref} className="toast-region">
-      {state.visibleToasts.map((toast) => {
-        if (toast.content?.type === NotificationType.ParticipantJoined) {
-          return <ToastJoined key={toast.key} toast={toast} state={state} />
-        }
-        if (toast.content?.type === NotificationType.HandRaised) {
-          return <ToastRaised key={toast.key} toast={toast} state={state} />
-        }
-        if (toast.content?.type === NotificationType.ParticipantMuted) {
-          return <ToastMuted key={toast.key} toast={toast} state={state} />
-        }
-        if (toast.content?.type === NotificationType.MessageReceived) {
-          return (
-            <ToastMessageReceived key={toast.key} toast={toast} state={state} />
-          )
-        }
-        if (toast.content?.type === NotificationType.LowerHand) {
-          return <ToastLowerHand key={toast.key} toast={toast} state={state} />
-        }
-        return <Toast key={toast.key} toast={toast} state={state} />
-      })}
+      {state.visibleToasts.map((toast) => renderToast(toast, state))}
     </div>
   )
 }