Error in multiple Select: Cannot read properties of undefined (reading 'value') at SelectInput.js:394:63

[arinsinc]

Steps to reproduce

This is my select component:

     <FormControl size='small'>
          <InputLabel id="demo-simple-select-label">
              Groups
           </InputLabel>
           <Select
                variant='outlined'
                labelId="demo-simple-select-label"
                id="demo-simple-select"
                multiple
                value={formState.values.groups}
                onChange={handleChange}
                input={<OutlinedInput label="Groups" />}
                label="Group"
                name="groups"
           >
                {addMenuItem}
           </Select>
           <FormHelperText>
                {hasError('groups') ? formState.errors['groups'] : null}
           </FormHelperText>
      </FormControl>

     const addMenuItem = groups.map((option) => (
            <MenuItem key={option} value={option}>{option}</MenuItem>
     ));

It is failing in SelectInput.js at this line:

Current behavior

Not able to open form component with select component attached

Expected behavior

Should able to select multiple values in a form

Context

Issue with the <InputLabel>, if I remove this component, form has been rendered but without any label

Your environment

• Google Chrome latest version
• MUI latest version

npx @mui/envinfo

  Don't forget to mention which browser you used.
  Output from `npx @mui/envinfo` goes here.

Search keywords: select input

[sai6855]

 <FormControl size='small'>
      <InputLabel id="demo-simple-select-label">
          Groups
       </InputLabel>
       <Select
            variant='outlined'
            labelId="demo-simple-select-label"
            id="demo-simple-select"
            multiple
            value={formState.values.groups}
            onChange={handleChange}
            input={<OutlinedInput label="Groups" />}
            label="Group"
            name="groups"
       >
            {groups.map((option) => (
        <MenuItem key={option} value={option}>{option}</MenuItem>
 ))}
       </Select>
       <FormHelperText>
            {hasError('groups') ? formState.errors['groups'] : null}
       </FormHelperText>
  </FormControl>

@arinsinc can you try this?

[arinsinc]

@sai6855 No, it is not working.

[sai6855]

Can you please share code sandbox / repo to clone which reproduces the issue?

[arinsinc]

It is working in sandbox as isolated component, don't know why? Will check the parent component and whole chain of parent-child components.