title: Calendar issue when clicking on it
body: <p>The datepicker does not open in my app. Could you please help me? When I click, the openCalendar function is executing, but the datepicker does not open at all. </p>
  
  <pre><code>openCalendar = e =&gt; {
  e.preventDefault();
  e.stopPropagation();
  this._calendar.setOpen(true);
  
  console.log(this._calendar);
  };
  </code></pre>
  
  <p>I have this code in return {</p>
  
  <pre><code>          {/* DATEPICKER */}
        &lt;div className={cx(s.dtpicker, step ? overlay.legField : null)} ref={el =&gt; (this.dtpicker = el)}&gt;
          &lt;div className={s.dateClicker} onClick={this.openCalendar} /&gt;
          &lt;Calendar color="#A8AAB7" /&gt;
  
          &lt;DatePicker
            ref={c =&gt; (this._calendar = c)}
            selected={leg.date || this.getToday()}
            onChange={(d) =&gt; this.updateDate(d, index)}
            minDate={this.today}
            autoFocus={false}
            readOnly={true}
  
            /*open={true}*/
  
            shouldCloseOnSelect={false}
            locale={currentLocale}
            showTimeSelect
            timeFormat="HH:mm"
            timeIntervals={30}
            dateFormat="ddd, DD MMM YYYY HH:mm"
            popperPlacement="bottom-center"
            popperModifiers={{
              preventOverflow: {
                enabled: true,
                escapeWithReference: false, // force popper to stay in viewport (even when input is scrolled out of view)
                boundariesElement: 'viewport'
              }
            }}
          /&gt;
  
        &lt;/div&gt;
  </code></pre>
  
  <p>I can provide more details if needed to solve this issue. </p>
  
  <p>Thank you in advance!</p>