Ensure language defaultValue is used.

assets/js/react/components/SelectLanguage.tsx

@@ -1,6 +1,8 @@
 import * as React from "react"
 import { SelectProps } from "@mui/base/Select"
 
+import type { Language } from "../types/Language"
+
 import { Select, Option } from "./Select"
 import { useFetchLanguages } from "../utils/queries"
 
@@ -11,31 +13,29 @@ export const SelectLanguage = React.forwardRef(function SelectLanguage(
   ref: React.ForwardedRef<HTMLButtonElement>
 ) {
   const id = React.useId()
-  const [options, setOptions] = React.useState([
+  const [options, setOptions] = React.useState<Language[] | null>(null)
-    { value: "", label: "Loading..." },
-  ])
   const { defaultValue, ...other } = props
   const { isLoading, data } = useFetchLanguages()
 
   React.useEffect(() => {
-    if (!data) {
+    if (data) {
-      return
+      setOptions(data)
     }
-    setOptions(data.map((row) => ({ value: row.code, label: row.name })))
   }, [data])
 
   return (
     <Select
       ref={ref}
-      key={isLoading ? `${id}-loading` : `${id}-loaded`}
+      // Use key to force re-render and ensure the defaultValue takes effect.
-      className={isLoading ? "text-slate-900/60" : ""}
+      key={!options && isLoading ? `${id}-loading` : `${id}-loaded`}
-      defaultValue={defaultValue}
+      className={!options && isLoading ? "text-slate-900/60" : ""}
+      defaultValue={!options && isLoading ? [""] : defaultValue}
       {...other}
     >
-      {options.map((entry, index) => {
+      {options?.map((lang, index) => {
         return (
-          <Option key={index} value={entry.value}>
+          <Option key={index} value={lang.code}>
-            {entry.label}
+            {lang.name}
           </Option>
         )
       })}