Type fixes for react v19 compatibility (#2937)

src/room/GroupCallView.tsx

@@ -154,11 +154,11 @@ export const GroupCallView: FC<Props> = ({
   );
 
   const deviceContext = useMediaDevices();
-  const latestDevices = useRef<MediaDevices>();
+  const latestDevices = useRef<MediaDevices | undefined>(undefined);
   latestDevices.current = deviceContext;
 
   // TODO: why do we use a ref here instead of using muteStates directly?
-  const latestMuteStates = useRef<MuteStates>();
+  const latestMuteStates = useRef<MuteStates | undefined>(undefined);
   latestMuteStates.current = muteStates;
 
   useEffect(() => {

src/room/InCallView.tsx

@@ -23,6 +23,7 @@ import {
   useMemo,
   useRef,
   useState,
+  type JSX,
 } from "react";
 import useMeasure from "react-use-measure";
 import { type MatrixRTCSession } from "matrix-js-sdk/src/matrixrtc/MatrixRTCSession";

src/room/LobbyView.tsx

@@ -5,7 +5,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC, useCallback, useMemo, useState } from "react";
+import { type FC, useCallback, useMemo, useState, type JSX } from "react";
 import { useTranslation } from "react-i18next";
 import { type MatrixClient } from "matrix-js-sdk/src/matrix";
 import { Button } from "@vector-im/compound-web";

src/room/RoomPage.tsx

@@ -5,7 +5,14 @@ SPDX-License-Identifier: AGPL-3.0-only
 Please see LICENSE in the repository root for full details.
 */
 
-import { type FC, useEffect, useState, type ReactNode, useRef } from "react";
+import {
+  type FC,
+  useEffect,
+  useState,
+  type ReactNode,
+  useRef,
+  type JSX,
+} from "react";
 import { logger } from "matrix-js-sdk/src/logger";
 import { useTranslation } from "react-i18next";
 import { CheckIcon } from "@vector-im/compound-design-tokens/assets/web/icons";

src/room/useLoadGroupCall.ts

@@ -122,7 +122,7 @@ export const useLoadGroupCall = (
   viaServers: string[],
 ): GroupCallStatus => {
   const [state, setState] = useState<GroupCallStatus>({ kind: "loading" });
-  const activeRoom = useRef<Room>();
+  const activeRoom = useRef<Room | undefined>(undefined);
   const { t } = useTranslation();
 
   const bannedError = useCallback(