material ui - Autocomplete multiple error

Question

I am using material-ui in React.js. When using multiple in Autocomplete it gives me the error, Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).filter is not a function at useAutocomplete, The above error occurred in the <ForwardRef(Autocomplete)> component: in ForwardRef(Autocomplete).

material-ui version - "@mui/material": "^5.6.0",

Code:

                        <Autocomplete
                              multiple={true}
                              disableCloseOnSelect
                              id={field.name}
                              name={field.name}
                              options={locations}
                              value={props.values.locationId}
                              size="small"
                              autoComplete={false}
                              onChange={(e, newValue) => {
                                props.setFieldValue(
                                  'locationId',
                                  newValue ? newValue : '',
                                  true,
                                );
                              }}
                              onBlur={() =>
                                props.setFieldTouched(field.name, true)
                              }
                              getOptionLabel={(option) =>
                                option['name'] ? option['name'] : ''
                              }
                              renderOption={(props, option, { selected }) => (
                                <li {...props}>
                                  <Checkbox
                                    style={{ marginRight: 8 }}
                                    checked={selected}
                                  />
                                  {option.title}
                                </li>
                              )}
                              renderInput={(params) => (
                                <TextField
                                  {...params}
                                  fullWidth
                                  size="small"
                                  placeholder={field.placeholder}
                                  variant="outlined"
                                />
                              )}
                            />

Answer 1

When using multiple, value must be an array (see multiple in the docs). I found this answer helpful for using a controlled Autocomplete component in multiple mode, as you're doing here.