Patch 11Labs selection UI bug (#2284)

* Patch 11Labs selection UI bug

* remove log

Author: timothycarambat

frontend/src/components/TextToSpeech/ElevenLabsOptions/index.jsx

@@ -3,7 +3,9 @@ import System from "@/models/system";
 
 export default function ElevenLabsOptions({ settings }) {
   const [inputValue, setInputValue] = useState(settings?.TTSElevenLabsKey);
-  const [openAIKey, setOpenAIKey] = useState(settings?.TTSElevenLabsKey);
+  const [elevenLabsKey, setElevenLabsKey] = useState(
+    settings?.TTSElevenLabsKey
+  );
 
   return (
     <div className="flex gap-x-4">
@@ -21,11 +23,11 @@ export default function ElevenLabsOptions({ settings }) {
           autoComplete="off"
           spellCheck={false}
           onChange={(e) => setInputValue(e.target.value)}
-          onBlur={() => setOpenAIKey(inputValue)}
+          onBlur={() => setElevenLabsKey(inputValue)}
         />
       </div>
       {!settings?.credentialsOnly && (
-        <ElevenLabsModelSelection settings={settings} apiKey={openAIKey} />
+        <ElevenLabsModelSelection settings={settings} apiKey={elevenLabsKey} />
       )}
     </div>
   );
@@ -84,15 +86,18 @@ function ElevenLabsModelSelection({ apiKey, settings }) {
       <select
         name="TTSElevenLabsVoiceModel"
         required={true}
-        defaultValue={settings?.TTSElevenLabsVoiceModel}
         className="bg-zinc-900 border-gray-500 text-white text-sm rounded-lg block w-full p-2.5"
       >
         {Object.keys(groupedModels)
           .sort()
           .map((organization) => (
             <optgroup key={organization} label={organization}>
               {groupedModels[organization].map((model) => (
-                <option key={model.id} value={model.id}>
+                <option
+                  key={model.id}
+                  value={model.id}
+                  selected={model.id === settings?.TTSElevenLabsVoiceModel}
+                >
                   {model.name}
                 </option>
               ))}