You have provided an out-of-range value `undefined` for the select component. Consider providing a value that matches one of the available options

Reactの勉強の為、アプリを作成しており、MUIのSelectコンポーネントを使用していたら下記のようなwarning文が出てきました。

MUI: You have provided an out-of-range value `undefined` for the select component. Consider providing a value that matches one of the available options

ググってみたところ、有効な解決策が見つからなかったのですが、上記文を直訳すると

選択コンポーネントに範囲外の値「未定義」を指定しました。 利用可能なオプションのいずれかに一致する値を提供することを検討してください

という内容になります。

該当ソースコードが下記になります。

const [selectedEditCategory, setSelectedEditCategory] = useState("");
consthandleEditRegularTaskOpen= (task) =>{
  setSelectedEditCategory(task.category);
};

return(
 <FormControlsx={{ ml:1, minWidth:100}}size="small">
 <InputLabelid="demo-simple-select-label">種別</InputLabel>
 <Select
   labelId="demo-simple-select-label"
   id="demo-simple-select"
   value={selectedEditCategory}
   label="種別"
   onChange={handleChangeEditCategory}
   MenuProps={MenuProps}
 >
 {options.map((category, index) =>(
   <MenuItemkey={index}value={category}>{category}</MenuItem>
 ))}
 </Select>
 </FormControl>
）

編集画面でDBから取ってきた値をSelectの初期値として表示させているのですが、DBにnullのデータがあったのが原因で、warning文にあるように「selectの選択肢に未定義はないのに未定義が選択されている」と言うwarning文が発生していたようです。

なので、解決策としてDBの値がnullであれば空文字を表示するようにしたところwarning文が消えました。

修正ソースコード

const [selectedEditCategory, setSelectedEditCategory] = useState("");
consthandleEditRegularTaskOpen= (task) =>{
   // 下記を修正
   setSelectedEditCategory(task.category || "");
};

 return(
 <FormControlsx={{ ml:1, minWidth:100}}size="small">
 <InputLabel id="demo-simple-select-label">種別</InputLabel>
 <Select
   labelId="demo-simple-select-label"
   id="demo-simple-select"
   value={selectedEditCategory}
   label="種別"
   onChange={handleChangeEditCategory}
   MenuProps={MenuProps}
 >
  {options.map((category, index) => (
    <MenuItem key={index} value={category}>{category}</MenuItem>
  ))}
 </Select>
 </FormControl>
)

結論。
warning文やerror文をちゃんと読むのが解決への道。