MaterialUI warning on controlled select component

[jdgarcia1381]

Hi,

I'm getting the following warning from MaterialUI when I use a controlled select component:
Material-UI: You have provided an out-of-range value 'undefined' for the select component. Consider providing a value that matches one of the available options or ''.

On my useForm I use '' as defaultValue and this is my controlled component:

<FormControl
    fullWidth
    variant="outlined"
    error={!!error}
    required={required}
    disabled={disabled}
  >
    <InputLabel id={`select-${name}`}>
      {label}
    </InputLabel>
    <Controller
      as={
        <Select
          labelId={`select-${name}`}
          label={label}
          defaultValue=''
        >
          {options.map((option) => (
            <MenuItem key={option.value} value={option.value}>{option.label}</MenuItem>
          ))}
        </Select>
      }
      control={control}
      name={name}
      defaultValue=''
    />
    {error && (
      <FormHelperText>{error}</FormHelperText>
    )}
  </FormControl>

Apparently the defaultValue is not being setted on first render, which causes this warning. Is there any way to prevent it? I tried to make a conditional render on my controlled select component but still produces this warning.

Btw, thank you for this amazing form library! :)

[bluebill1049]

looks like your defaultValue is miss matching what's in MUI, which version are you using? V5 or v6?

[jdgarcia1381]

"@material-ui/core": "^4.9.9"
"react-hook-form": "^5.6.0"

[jdgarcia1381]

Just removed node_modules folder and re-install dependencies using yarn, now warning is gone. I'm using same versions:

"@material-ui/core": "^4.9.9"
"react-hook-form": "^5.6.0"