I used the react-nice-dates component in my project. Actually, it works fine on normal pages but in popup or modal, it can't able to close until and unless the user selects a date. That means a user needs to forcefully select the date. which I want to alter and want to open and close the date picker popup manually as example open when date picker input is focused (onFocus event) and close when the user leaves input of date picker(onBlur event)

following there is my code. the common component of datePicker which I used in various places (page as well as modal or popup)

        date={date}
        onDateChange={setDateTemp}
        locale={enGB}
        format='dd-MM-yyyy'>
        {({ inputProps, focused }) => {
          console.log('focused: ', focused)
          console.log('inputProps: ', inputProps)
          return (
            <div className='relative w-full flex items-center'>
              <input
                type='text'
                name={name}
                id={id}
                placeholder={placeholder}
                autoComplete='off'
                className={`passwordInput text-sm px-5 py-2 pr-10 block w-full border-darkgray border transition focus:outline-none focus:border-primary rounded-lg ${'input'} ${className}`}
                {...inputProps}
              />```