Update dependency @livekit/components-react to v1.4.1 (#1923)

* Update dependency @livekit/components-react to v1.4.1

* patch to match new lk api

Signed-off-by: Timo K <toger5@hotmail.de>

---------

Signed-off-by: Timo K <toger5@hotmail.de>
Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com>
Co-authored-by: Timo K <toger5@hotmail.de>

src/livekit/MediaDevicesContext.tsx

@@ -26,6 +26,7 @@ import {
 } from "react";
 import { createMediaDeviceObserver } from "@livekit/components-core";
 import { Observable } from "rxjs";
+import { logger } from "matrix-js-sdk/src/logger";
 
 import {
   isFirefox,
@@ -82,21 +83,31 @@ function useMediaDevice(
   // Tragically, the only way to get device names out of LiveKit is to specify a
   // kind, which then results in multiple permissions requests.
   const deviceObserver = useMemo(
-    () => createMediaDeviceObserver(kind, requestPermissions),
+    () =>
+      createMediaDeviceObserver(
+        kind,
+        () => {
+          logger.error("Error creating MediaDeviceObserver");
+        },
+        requestPermissions,
+      ),
     [kind, requestPermissions],
   );
   const available = useObservableState(deviceObserver, []);
   const [selectedId, select] = useState(fallbackDevice);
 
   return useMemo(() => {
-    const devId = available.some((d) => d.deviceId === selectedId)
-      ? selectedId
-      : available.some((d) => d.deviceId === fallbackDevice)
-      ? fallbackDevice
-      : available.at(0)?.deviceId;
+    let devId;
+    if (available) {
+      devId = available.some((d) => d.deviceId === selectedId)
+        ? selectedId
+        : available.some((d) => d.deviceId === fallbackDevice)
+        ? fallbackDevice
+        : available.at(0)?.deviceId;
+    }
 
     return {
-      available,
+      available: available ?? [],
       selectedId: alwaysDefault ? undefined : devId,
       select,
     };