Fix avatars of remote participants in matryoshka mode

RoomWidgetClient doesn't do lazy loading, so it only has the state event data to work with and not the lazy loaded user object.

Previously avatars of remote participants were all replaced by fallback avatars.

src/Facepile.tsx

@@ -72,12 +72,12 @@ export function Facepile({
       {...rest}
     >
       {participants.slice(0, max).map((member, i) => {
-        const avatarUrl = member.user?.avatarUrl;
+        const avatarUrl = member.getMxcAvatarUrl();
         return (
           <Avatar
             key={member.userId}
             size={size}
-            src={avatarUrl}
+            src={avatarUrl ?? undefined}
             fallback={member.name.slice(0, 1).toUpperCase()}
             className={styles.avatar}
             style={{ left: i * (_size - _overlap) }}

src/room/InCallView.tsx

@@ -237,14 +237,14 @@ export function InCallView({
 
   const renderAvatar = useCallback(
     (roomMember: RoomMember, width: number, height: number) => {
-      const avatarUrl = roomMember.user?.avatarUrl;
+      const avatarUrl = roomMember.getMxcAvatarUrl();
       const size = Math.round(Math.min(width, height) / 2);
 
       return (
         <Avatar
           key={roomMember.userId}
           size={size}
-          src={avatarUrl}
+          src={avatarUrl ?? undefined}
           fallback={roomMember.name.slice(0, 1).toUpperCase()}
           className={styles.avatar}
         />