Be even less brittle.

src/useReactions.tsx

@@ -111,8 +111,7 @@ export const ReactionsProvider = ({
 
   // This effect will check the state whenever the membership of the session changes.
   useEffect(() => {
-    // Fetches the first reaction for a given event. We assume no more than
+    // Fetches the first reaction for a given event.
-    // one reaction on an event here.
     const getLastReactionEvent = (
       eventId: string,
       expectedSender: string,
@@ -123,7 +122,12 @@ export const ReactionsProvider = ({
         EventType.Reaction,
       );
       const allEvents = relations?.getRelations() ?? [];
-      return allEvents.find((u) => u.event.sender === expectedSender);
+      return allEvents.find(
+        (reaction) =>
+          reaction.event.sender === expectedSender &&
+          reaction.getType() === EventType.Reaction &&
+          reaction.getContent()?.["m.relates_to"]?.key === "🖐️",
+      );
     };
 
     // Remove any raised hands for users no longer joined to the call.
@@ -148,13 +152,11 @@ export const ReactionsProvider = ({
         removeRaisedHand(m.sender);
       }
       const reaction = getLastReactionEvent(m.eventId, m.sender);
+      if (reaction) {
         const eventId = reaction?.getId();
         if (!eventId) {
           continue;
         }
-      if (reaction && reaction.getType() === EventType.Reaction) {
-        const content = reaction.getContent() as ReactionEventContent;
-        if (content?.["m.relates_to"]?.key === "🖐️") {
         addRaisedHand(m.sender, {
           membershipEventId: m.eventId,
           reactionEventId: eventId,
@@ -162,7 +164,6 @@ export const ReactionsProvider = ({
         });
       }
     }
-    }
     // Ignoring raisedHands here because we don't want to trigger each time the raised
     // hands set is updated.
     // eslint-disable-next-line react-hooks/exhaustive-deps