hides mic switch the right way

www/app/transcripts/audioInputsDropdown.tsx

@@ -6,19 +6,9 @@ const AudioInputsDropdown: React.FC<{
   audioDevices: Option[];
   disabled: boolean;
   hide: () => void;
+  deviceId: string;
   setDeviceId: React.Dispatch<React.SetStateAction<string | null>>;
 }> = (props) => {
-  const [ddOptions, setDdOptions] = useState<Option[]>([]);
-
-  useEffect(() => {
-    if (props.audioDevices) {
-      setDdOptions(props.audioDevices);
-      props.setDeviceId(
-        props.audioDevices.length > 0 ? props.audioDevices[0].value : null,
-      );
-    }
-  }, [props.audioDevices]);
-
   const handleDropdownChange = (option: Option) => {
     props.setDeviceId(option.value);
     props.hide();
@@ -26,9 +16,9 @@ const AudioInputsDropdown: React.FC<{
 
   return (
     <Dropdown
-      options={ddOptions}
+      options={props.audioDevices}
       onChange={handleDropdownChange}
-      value={ddOptions[0]}
+      value={props.deviceId}
       className="flex-grow w-full"
       disabled={props.disabled}
     />

www/app/transcripts/recorder.tsx

@@ -279,7 +279,7 @@ export default function Recorder(props: RecorderProps) {
 
   useEffect(() => {
     if (props.audioDevices && props.audioDevices.length > 0) {
-      setDeviceId[props.audioDevices[0].value];
+      setDeviceId(props.audioDevices[0].value);
     }
   }, [props.audioDevices]);
 
@@ -347,7 +347,7 @@ export default function Recorder(props: RecorderProps) {
           >
             {isRecording ? "Stop" : "Record"}
           </button>
-          {props.audioDevices && props.audioDevices?.length > 0 && (
+          {props.audioDevices && props.audioDevices?.length > 0 && deviceId && (
             <>
               <button
                 className="text-center text-blue-400 hover:text-blue-700 ml-2 md:ml:4 p-2 rounded-lg focus-visible:outline outline-blue-400"
@@ -365,6 +365,7 @@ export default function Recorder(props: RecorderProps) {
                   audioDevices={props.audioDevices}
                   disabled={recordStarted}
                   hide={() => setShowDevices(false)}
+                  deviceId={deviceId}
                 />
               </div>
             </>