ReactのMaterial UI(MUI)の<MenuItem>を使ったらErrorが出たよ

はじめに

ReactのMaterial UIを使って、業後に学習をしていたら、警告がでたので、備忘として記事を書きます。
業務では主に業務系システムの保守をやっています。（たまに開発に近いこともってます）

Reactのversion 18.2.0
Material UIのversion 5.14.6

どんなことが起こったか？

まずは以下のコード

<FormControl variant="standard" sx={{ minWidth: 195 }}>
    <InputLabel>{label}</InputLabel>
        <Controller
            name={name}
            control={control}
            defaultValue={selectedValue}
            render={({ field }) => (
            <Select
                {...field}
            >
                {SelectItems}
            </Select>
        )}
        >
</FormControl>

<MenuItem  value={item.user_id} key={id}>
    {item.user_name}
</MenuItem >

以下のような警告が出ました。

SelectInput.js:567 MUI: You have provided an out-of-range value `7` for the select (name="user_id") component.
Consider providing a value that matches one of the available options or ''.
The available values are "". 

日本語訳↓
SelectInput.js:567 MUI: select (name="user_id") コンポーネントに範囲外の値「7」を指定しました。
使用可能なオプションの 1 つまたは '' に一致する値を指定することを検討してください。
使用可能な値は「」です。

やりたかったことは、DBに保存された値をセレクトボックスの選択肢に追加して、選択肢を表示させているという状態です。ちなみに保存された値は

defaultValue={selectedValue}

として、propsで前回設定された値を設定されるようにしました。
ちなみにapiへのアクセスはaxsiosを使っています。（誤字った＾＾；）
ちなみにapiへのアクセスはaxiosを使っています。

今回の場合ですと、デフォルト値が設定されていない場合には警告が起きないのですが、デフォルト値が設定されている状態だとエラーがでるようです。
もともとセレクトボックスであれば、デザインなどはなんでもよかったのですが、見た目が好きで使おうとしていましたが、コンソールを見るたび表示される警告が嫌になってきたので、原因を調べました。
※ちなみにデフォルト値に

defaultValue=''

と空文字を設定すると警告は表示されませんでした。

原因は？

調べたところ以下が原因のようです。

既にイシューとして上がっていました。
URLを見てみると、どうやら、選択肢に値が設定される前に、デフォルト値が設定されてしまうせいのようです。
（あってるかな？間違っていたらすみません。）

どうやって解決したか

結局のところ、<MenuItem >を使った解決方法が分からず以下を使用しました。

<FormControl fullWidth>
  <InputLabel variant="standard" htmlFor="uncontrolled-native">
    Age
  </InputLabel>
  <NativeSelect
    defaultValue={30}
    inputProps={{
      name: 'age',
      id: 'uncontrolled-native',
    }}
  >
    <option value={10}>Ten</option>
    <option value={20}>Twenty</option>
    <option value={30}>Thirty</option>
  </NativeSelect>
</FormControl>

//https://mui.com/material-ui/react-select/#system-NativeSelectDemo.tsx

うぅ、、、解決方法がまったくわからんかった。。。😵‍💫
くﾞやﾞしﾞいﾞ～～～～～～～～～～～～～～～～～～～～～～
2023/10/09追加に解決！

解決しました 2023/10/09追加

（@markpwelさんありがとうございます。）

以下の実装で解決！

<FormControl variant="standard" sx={{ minWidth: 195 }}>
    <InputLabel>{label}</InputLabel>
        <Controller
            name={name}
            control={control}
            defaultValue={isloads ? selectedValue : ""}// ←ここでデータ取得後+他処理終了後にflgを変更する処理を追加
            // &&のほうがコンパクトにかけそう・・・
            render={({ field }) => (
            <Select
                {...field}
            >
                {SelectItems}
            </Select>
        )}
        >
</FormControl>

こちらで自分は解決しました！
困っている方がいれば是非参考にしてください！！！！！！

最後に

　どなたか解決方法を知っている方がいたら、ぜひ教えてください。

おかげさまで無事解決しました！
よかった・・・