React picky not auto closing while selecting one value,?

If using single select, is it possible to close the dropdown after selection? I tried passing keepOpen props but cant able to fix, whiling passing keepOpen the drop down not working as it would, How can fix this issue?

console log while clicking drop down console log

Parent Component Input Feild

                <Grid item xs={12} sm={12} md={12} className={classes.item}>
                            <Field name='gender' label={I18n.t('gender')} filterable={false} component={renderSelect} >
                                {
                                    _.get(getGender, 'data', genderArray)
                                }
                            </Field>
                        </Grid>
                        <Grid item xs={12} sm={12} md={12} className={classes.item}>
                            <Field name='userTypeResponse' label={I18n.t('user_type')} component={renderSelect} filterable={false} >
                                {
                                    data?.map(item => ({ id: item.id, name: item.name }))
                                }
                            </Field>
                        </Grid>

Selector Component

 const renderSelect = ({ input: { value, name, ...inputProps }, children, selectAll, selectAllText = 'Select All', filterable = true, multiple, label, disabled = false, placeholder = '', showLoader = false, spinnerProps = 'selectTagProp', meta: { touched, error } }) => {
    return < LoadingOverlay active={showLoader} spinnerProps={spinnerProps} >
        <FormGroup>
            {label && <div className='customPicky'>
                <InputLabel htmlFor={name}>{label}</InputLabel>
            </div>}
            <MultiSelect
                value={multiple ? value || [] : value || null} {...inputProps}
                options={children}
                open={false}
                multiple={multiple}
                keepOpen={false}
                includeSelectAll={selectAll}
                selectAllText={selectAllText}
                includeFilter={filterable}
                labelKey='name'
                valueKey='id'
                placeholder={placeholder}
                dropdownHeight={150}
                clearFilterOnClose={true}
                defaultFocusFilter={true}
                disabled={disabled}
                className={disabled === true ? 'pickySelect grey' : null}
                numberDisplayed={1}
                renderList={({ items, selectValue, getIsSelected }) => {
                    return <div >
                        {items.length < 1 && <div style={{ textAlign: 'center', padding: '5px' }}>{I18n.t('no_data_available')}</div>}
                        {items.map(item => (
                            <li key={item.id} onClick={() => selectValue(item)} style={{ display: 'flex', alignItems: 'center' }}>
                                <input type={multiple ? 'checkbox' : 'radio'} id={item.id} checked={getIsSelected(item)} />
                                <div style={{ marginLeft: '5px' }} >
                                    {item.name}
                                </div>
                            </li>
                        ))}
                    </div>;
                }
                }
            />
            {touched && error && <Typography color="error" variant="caption">{error}</Typography>}
        </FormGroup>
    </LoadingOverlay >;
};