Suppress the material UI Select component out of range error

• I have searched the issues of this repository and believe that this is not a duplicate.

Summary 💡

When creating a Select field that is managed and the values are not yet loaded, the following error pops up:

Material-UI: You have provided an out-of-range value `NL` for the select component.
Consider providing a value that matches one of the available options or ''.
The available values are "".

This error is hard to get rid of and should be able to be suppressed?

While the error could be prevented by not showing the Select component while anything is still loading. This kind of beats the idea of modern web pages, to show data as soon as possible.

For example, a user page can show the current selected country, while still loading the list of countries.

The error should be suppressible/ignorable as not to clutter the log with long error message.

Examples 🌈

export const ChangeCountryView = function ChangeCountryView(props:)  {
    const {user}  = props
    
    const [mainList, setMainList] = React.useState<string[]>([]);
    React.useEffect(() => {
        someLoader.loadCountryListFromServer().then((loadedList) => {
            setMainList(loadedList);
        });
    }, []);
    return <Select value={user.country}>{
        Array.from(mainList, (v) => {
            return <MenuItem key={v} value={v}>{v}</MenuItem>
        });
    }</Select>
}

Motivation 🔦

To enable progressive loaded pages this would really help, while actually improving the tools to bug fix actual bugs.

Start at the Select component and reproduce the out-of-range warning with a controlled value whose options load asynchronously. Determine how the warning can be suppressed or ignored, then verify that the warning remains available for actual invalid values and that the documented example behavior is covered.