diff --git a/package.json b/package.json
index 8a08992..185d23c 100644
--- a/package.json
+++ b/package.json
@@ -45,7 +45,7 @@
     "i18next": "^21.10.0",
     "i18next-browser-languagedetector": "^6.1.8",
     "i18next-http-backend": "^1.4.4",
-    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#9d3ac66cf847fe8cb0359d64e1f1d67902b982a1",
+    "matrix-js-sdk": "github:matrix-org/matrix-js-sdk#2c8eece5ca5333c6e6a14e8ed53f359ed0e9e9bf",
     "matrix-widget-api": "^1.0.0",
     "mermaid": "^8.13.8",
     "normalize.css": "^8.0.1",
diff --git a/src/room/useGroupCall.ts b/src/room/useGroupCall.ts
index ec496ff..2e6978a 100644
--- a/src/room/useGroupCall.ts
+++ b/src/room/useGroupCall.ts
@@ -23,12 +23,7 @@ import {
   GroupCallUnknownDeviceError,
   GroupCallError,
 } from "matrix-js-sdk/src/webrtc/groupCall";
-import {
-  CallState,
-  MatrixCall,
-  CallEvent,
-} from "matrix-js-sdk/src/webrtc/call";
-import { CallFeed } from "matrix-js-sdk/src/webrtc/callFeed";
+import { CallFeed, CallFeedEvent } from "matrix-js-sdk/src/webrtc/callFeed";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 import { useTranslation } from "react-i18next";
 import { IWidgetApiRequest } from "matrix-widget-api";
@@ -96,29 +91,20 @@ function getParticipants(
   const participants = new Map<RoomMember, Map<string, ParticipantInfo>>();
 
   for (const [member, participantsStateMap] of groupCall.participants) {
-    const callMap = groupCall.calls.get(member);
     const participantInfoMap = new Map<string, ParticipantInfo>();
     participants.set(member, participantInfoMap);
 
     for (const [deviceId, participant] of participantsStateMap) {
-      const call = callMap?.get(deviceId);
       const feed = groupCall.userMediaFeeds.find(
         (f) => f.userId === member.userId && f.deviceId === deviceId
       );
 
-      let connectionState = ConnectionState.EstablishingCall;
-      if (feed?.isLocal()) {
-        connectionState = ConnectionState.Connected;
-      } else if (call !== undefined) {
-        if (call.state === CallState.Connected) {
-          connectionState = ConnectionState.Connected;
-        } else if (call.state === CallState.Connecting) {
-          connectionState = ConnectionState.WaitMedia;
-        }
-      }
-
       participantInfoMap.set(deviceId, {
-        connectionState,
+        connectionState: feed
+          ? feed.connected
+            ? ConnectionState.Connected
+            : ConnectionState.WaitMedia
+          : ConnectionState.EstablishingCall,
         presenter: participant.screensharing,
       });
     }
@@ -188,19 +174,49 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
       });
     }
 
+    const prevUserMediaFeeds = new Set<CallFeed>();
+
     function onUserMediaFeedsChanged(userMediaFeeds: CallFeed[]): void {
+      for (const feed of prevUserMediaFeeds) {
+        feed.off(CallFeedEvent.ConnectedChanged, onConnectedChanged);
+      }
+      prevUserMediaFeeds.clear();
+
+      for (const feed of userMediaFeeds) {
+        feed.on(CallFeedEvent.ConnectedChanged, onConnectedChanged);
+        prevUserMediaFeeds.add(feed);
+      }
+
       updateState({
         userMediaFeeds: [...userMediaFeeds],
         participants: getParticipants(groupCall),
       });
     }
 
+    const prevScreenshareFeeds = new Set<CallFeed>();
+
     function onScreenshareFeedsChanged(screenshareFeeds: CallFeed[]): void {
+      for (const feed of prevScreenshareFeeds) {
+        feed.off(CallFeedEvent.ConnectedChanged, onConnectedChanged);
+      }
+      prevScreenshareFeeds.clear();
+
+      for (const feed of screenshareFeeds) {
+        feed.on(CallFeedEvent.ConnectedChanged, onConnectedChanged);
+        prevScreenshareFeeds.add(feed);
+      }
+
       updateState({
         screenshareFeeds: [...screenshareFeeds],
       });
     }
 
+    function onConnectedChanged(connected: boolean): void {
+      updateState({
+        participants: getParticipants(groupCall),
+      });
+    }
+
     function onActiveSpeakerChanged(activeSpeaker: CallFeed | undefined): void {
       updateState({
         activeSpeaker: activeSpeaker ?? null,
@@ -228,25 +244,7 @@ export function useGroupCall(groupCall: GroupCall): UseGroupCallReturnType {
       });
     }
 
-    const prevCalls = new Set<MatrixCall>();
-
-    function onCallState(): void {
-      updateState({ participants: getParticipants(groupCall) });
-    }
-
-    function onCallsChanged(
-      calls: Map<RoomMember, Map<string, MatrixCall>>
-    ): void {
-      for (const call of prevCalls) call.off(CallEvent.State, onCallState);
-      prevCalls.clear();
-
-      for (const deviceMap of calls.values()) {
-        for (const call of deviceMap.values()) {
-          call.on(CallEvent.State, onCallState);
-          prevCalls.add(call);
-        }
-      }
-
+    function onCallsChanged(): void {
       updateState({ participants: getParticipants(groupCall) });
     }
 
diff --git a/yarn.lock b/yarn.lock
index 54909a9..1ea0c35 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -10266,12 +10266,11 @@ matrix-events-sdk@0.0.1:
   resolved "https://registry.yarnpkg.com/matrix-events-sdk/-/matrix-events-sdk-0.0.1.tgz#c8c38911e2cb29023b0bbac8d6f32e0de2c957dd"
   integrity sha512-1QEOsXO+bhyCroIe2/A5OwaxHvBm7EsSQ46DEDn8RBIfQwN5HWBpFvyWWR4QY0KHPPnnJdI99wgRiAl7Ad5qaA==
 
-"matrix-js-sdk@github:matrix-org/matrix-js-sdk#9d3ac66cf847fe8cb0359d64e1f1d67902b982a1":
+"matrix-js-sdk@github:matrix-org/matrix-js-sdk#76b255bdd89d2fa486537b5a2d530226bc280a6e":
   version "21.2.0"
-  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/9d3ac66cf847fe8cb0359d64e1f1d67902b982a1"
+  resolved "https://codeload.github.com/matrix-org/matrix-js-sdk/tar.gz/76b255bdd89d2fa486537b5a2d530226bc280a6e"
   dependencies:
     "@babel/runtime" "^7.12.5"
-    "@types/sdp-transform" "^2.4.5"
     another-json "^0.2.0"
     bs58 "^5.0.0"
     content-type "^1.0.4"