[Autocomplete] TypeError: (intermediate value)(intermediate value)(intermediate value).filter is not a function

I am integrating autocomplete component in my website

it is crashing when we type anything in the autocomplete field

it is giving following error

Uncaught TypeError: (intermediate value)(intermediate value)(intermediate value).filter is not a function in autocomplete

My code:

<Autocomplete
            multiple
            id="checkboxes-tags-demo"
            options={users}
            disableCloseOnSelect
            size="small"
            value={values.userIds}
            getOptionSelected={(option, value) => option.id == value.id}
            getOptionLabel={(option) => option.firstName + ' ' + option.lastName}
            renderOption={(option, { selected }) => (
              <React.Fragment>
                <Checkbox
                  icon={icon}
                  checkedIcon={checkedIcon}
                  style={{ marginRight: 8 }}
                  checked={selected}
                  // onChange={(e) => console.log('called12', e.target.value)}
                />
                {option.firstName + ' ' + option.lastName}
              </React.Fragment>
            )}
            style={{ width: '100%' }}
            renderInput={(params) => (
              <Field {...params} label="All Users" fullWidth name="userIds" component={TextField} />
            )}
            onChange={(event, val) => {
              if (val !== null) {
                const items = [];
                val.map((v) => items.push(v));
                setFieldValue('userIds', items);
              }
            }}
          />

my values:

values.userIds = [1,2]; users = [ {id:1,firstName:‘A’, lastName:‘B’}, {id:2,firstName:‘P’, lastName:‘Q’}, {id:3,firstName:‘X’, lastName:‘Y’},];

it is working fine on every other case like clicking on dropdown icon and then choosing the option or removing it by clicking on close icon

but crashing when we start to type anything in the field

Thanks