How can I provide a value that resolves this Material UI warning?

I'm fetching API data (category names) from back-end (Node.js) to front-end (React). My goal, at the moment, is to populate a Select component from Material UI. For fetch API data, I'm using Express and Request on back-end; Axios on front-end. Apparently, it works, the Select component got a correct list of options but this console warning appeared:

Material-UI: You have provided an out-of-range value `` for the select component. Consider providing a value that matches one of the available options or ''. The available values are animal, career, celebrity, dev, explicit, fashion, food, history, money, movie, music, political, religion, science, sport, travel.

These referenced values are from the fetched API data but I don't know how to correct this. Any help is welcome. Here's my code:

export default function Home() {    const classes = useStyles();    const [list, setList] = useState([]);    const [categoryName, setCategoryName] = useState([]);      useEffect(() => {      axios        .get("/getCategories")        .then((response) => {          setList(response.data.categories);                })        .catch((e) => {          console.log(e.response.data);        });    }, []);      const handleChange = (event) => {      setCategoryName(event.target.value);        };      return (      <div className={classes.root}>              <FormControl>          <InputLabel id="category-label">Category</InputLabel>          <Select                     labelId="category-label"            id="category"            value={categoryName}            onChange={handleChange}          >            {list.map((item) => (              <MenuItem key={item} value={item}>                {item}              </MenuItem>            ))}          </Select>        </FormControl>      </div>    );  }  

https://stackoverflow.com/questions/66486235/how-can-i-provide-a-value-that-resolves-this-material-ui-warning March 05, 2021 at 11:13AM