react-select-search package select drop down is open all the time when multiple select is set true

Question

i am using react-select-search: ^4.1.2, in my project package i am using the select search component with multiple={true} option enabled but i can't have the drop down closed after that ie, it is left opened for selection by default is there a way to fix this?

my page is as follows,

import React, { useState, useEffect } from 'react'
import '../../../assets/styles/modal.scss'
import closeIcon from '../../../images/icons/Icon2.png'
import SelectSearch from "react-select-search";
import { GalleyItems } from '../../../utils/configs';
import { DFPAPIEndpointGalley } from '../../../utils/axios'


export const GalleyLoad = (props) => {
  
useEffect(() => {
    let editAddFieldsDep=[];
    GalleyItems.items.map( (fieldValue, index) => {
      editAddFieldsDep.push({ key: fieldValue.id, name: fieldValue.name, value: fieldValue.name, label: fieldValue.name })
      return fieldValue;
    });
    setTrolleyItems(editAddFieldsDep);
}, [])

  
  return (
      <div className="overlay" role="dialog">
      <div className="dialog sm-scrollbar">
        <div className="dialog__content">
          <img className="modal__close_icon" alt='Close' src={closeIcon} onClick={props.onClose} />
          <h2 className="dialog__title subheading-text-medium fontMedium">{props.title}</h2>
          <hr />
          <div className="dialog__body_container flexCol alignItemsCenter">
            <div className="flexCol justifyContentCenter">
              <div className=" dialog__container_item input-container">
                <div className="dialog__description">
                  <label className="req">Trolley Id</label>
                  <input
                    id='aircraft'
                    type={'text'}
                    name="aircraft"
                    placeholder={'Trolley Id'}
                    value={state.aircraft}
                    onChange={""}
                    className='edit-input'
                    />
                </div>
              </div>
             </div>

             <div className="flexCol justifyContentCenter">
              <div className=" dialog__container_item input-container margTop24">
                <div className="dialog__description">
                <label className="req">Trolley Items</label>
                <SelectSearch
                    options={trolleyItems||[]}
                    onChange={(data) =>selectOptionChange(data)}
                    name="taskStatus"
                    multiple={true}
                    closeOnSelect={true}
                    data-id={""}
                    id={""}
                    placeholder="Choose Items"
          />
                </div>
              </div>
             </div>
          </div>



     <div className="dialog__footer flexCol alignItemsCenter margTop24">
          <button  disabled={false} className="done-button" onClick={onSaveAircraftDetails}>Done</button>
        </div>

         {/* {Boolean(showStatus) ?
          <>
            <div className={ "dialog__statusBlock " + (false ? 'alert_error' : 'alert_success') }>
              {showModalStatus}
            </div>
          </> : null } */}
        </div>

      </div>

    </div>
  );
}

export const GalleyLoading = (props) => {


  const onClose = (e) => {
    removeContainerOverlay();
    props.onClose();
  }

  const removeContainerOverlay = () => {
    /**
     * Remove overlay to parent class
     */
    (document.querySelectorAll('.content-container')[0]).classList.remove('modal-overlay-bg2');
  };

  return (
    <GalleyLoad
     title={props.title}
      onClose={onClose}
      setModalFormStatusObj={props.setModalFormStatusObj}
      >
    </GalleyLoad>
  )
}

here the multiple is set to true and my selection window has the select dropdown always in opened format