React picky not auto closing while selecting one value,? - reactjs

Question

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 >;
};