getting error warning in MUI TextField component with select

Question

getting error in console MUI: children must be passed when using the TextField component with select.

               <TextField
                select
                id="outlined-basic"
                label="User Name"
                name="user"
                size="small"
                {...teamForm.getFieldProps("user")}
                error={teamForm.touched.user && teamForm.errors.user}
                helpertext={teamForm.touched.user && teamForm.errors.user}
              >
                {list?.map((option) => (
                  <MenuItem key={option.username} value={option.name}>
                    {option.name}
                  </MenuItem>
                ))}
              </TextField>

Answer 1

Adding some other content when no list provided might help for this:

 <TextField
  select
  id="outlined-basic"
  label="User Name"
  name="user"
  size="small"
  {...teamForm.getFieldProps("user")}
  error={teamForm.touched.user && teamForm.errors.user}
  helpertext={teamForm.touched.user && teamForm.errors.user}
>
  {list ? list.map((option) => (
    <MenuItem key={option.username} value={option.name}>
      {option.name}
    </MenuItem>
  )) : <div></div>}
</TextField>