Fix double audio tracks

See comments. I'm not very happy with how this code bounces state in and out of different hooks and useEffect blocks, but as a quick fix this should work.

src/livekit/useLiveKit.ts

@@ -23,7 +23,7 @@ import {
   setLogLevel,
 } from "livekit-client";
 import { useLiveKitRoom } from "@livekit/components-react";
-import { useEffect, useMemo, useRef } from "react";
+import { useEffect, useMemo, useRef, useState } from "react";
 import E2EEWorker from "livekit-client/e2ee-worker?worker";
 import { logger } from "matrix-js-sdk/src/logger";
 
@@ -98,6 +98,11 @@ export function useLiveKit(
     [e2eeOptions]
   );
 
+  // useECConnectionState creates and publishes an audio track by hand. To keep
+  // this from racing with LiveKit's automatic creation of the audio track, we
+  // block audio from being enabled until the connection is finished.
+  const [blockAudio, setBlockAudio] = useState(true);
+
   // We have to create the room manually here due to a bug inside
   // @livekit/components-react. JSON.stringify() is used in deps of a
   // useEffect() with an argument that references itself, if E2EE is enabled
@@ -105,7 +110,7 @@ export function useLiveKit(
   const { room } = useLiveKitRoom({
     token: sfuConfig?.jwt,
     serverUrl: sfuConfig?.url,
-    audio: initialMuteStates.current.audio.enabled,
+    audio: initialMuteStates.current.audio.enabled && !blockAudio,
     video: initialMuteStates.current.video.enabled,
     room: roomWithoutProps,
     connect: false,
@@ -120,6 +125,11 @@ export function useLiveKit(
     sfuConfig
   );
 
+  // Unblock audio once the connection is finished
+  useEffect(() => {
+    if (connectionState === ConnectionState.Connected) setBlockAudio(false);
+  }, [connectionState, setBlockAudio]);
+
   useEffect(() => {
     // Sync the requested mute states with LiveKit's mute states. We do it this
     // way around rather than using LiveKit as the source of truth, so that the