[Select] Component not displaying the value on the first mount

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When using the Select component it does not displaying the value on the first mount after data is receive from API

Expected Behavior 🤔

Render the value on the first mount like the other component (textfield) after data is receive from API

Steps to Reproduce 🕹

Here is my code

const [pile, setPile] = useState([]);

//Fetch
useEffect(() => {
    if (open) {
      const pileRequest = axios.get(`${process.env.REACT_APP_API_URL}/pile/${idPile}`);
      const typeRequest = axios.get(`${process.env.REACT_APP_API_URL}/type/name`);
      Promise.all([pileRequest, typeRequest])
        .then((result) => {
          setPile(result[0].data);
          setType(result[1].data);
        }).catch((err) => {
          console.log(err);
        });
    }
  }, [open]);

***

// Select
<FormControl fullWidth margin="normal">
    <InputLabel>Type</InputLabel>
    <Select label="Type" onChange={handleChangeType} value={pile.type}>
        <MenuItem value={0}>Board</MenuItem>
        <MenuItem value={1}>Panel</MenuItem>
    </Select>
</FormControl>

Context 🔦

I want to display the values from my API with pre-filled fields

Your Environment 🌎

`npx @mui/envinfo`

  System:
    OS: Linux 5.10 Ubuntu 20.04.3 LTS (Focal Fossa)
  Binaries:
    Node: 14.17.6 - ~/.nvm/versions/node/v14.17.6/bin/node
    Yarn: Not Found
    npm: 7.23.0 - ~/.nvm/versions/node/v14.17.6/bin/npm
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.4.1 => 11.4.1 
    @emotion/styled: ^11.3.0 => 11.3.0 
    @mui/core:  5.0.0-alpha.49 
    @mui/icons-material: ^5.0.1 => 5.0.1 
    @mui/lab: ^5.0.0-alpha.48 => 5.0.0-alpha.49 
    @mui/material: ^5.0.1 => 5.0.2 
    @mui/private-theming:  5.0.1 
    @mui/styled-engine:  5.0.1 
    @mui/styles: ^5.0.1 => 5.0.1 
    @mui/system:  5.0.2 
    @mui/types:  7.0.0 
    @mui/utils:  5.0.1 
    @types/react:  17.0.24 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript:  4.4.3

Browser `Microsoft Edge`

[MOHAMMADArsalan]

@MGMehdi the issue this your are using const [pile, setPile] = useState([]); as an array and passing to select pile.type in this case type is undefined. So that’s why value is not showing. try to change state like

- const [pile, setPile] = useState([]);
+ const [pile, setPile] = useState({type: 0})

[mnajdova]

It doesn’t look like this bug report has enough info for one of us to reproduce it.

Please provide a CodeSandbox (https://material-ui.com/r/issue-template-latest), a link to a repository on GitHub, or provide a minimal code example that reproduces the problem.

Here are some tips for providing a minimal example: https://stackoverflow.com/help/mcve