flatpickr allowinput onchange issue

HTML

<script src="https://gitcdn.xyz/cdn/chmln/flatpickr/v3.0.7/dist/flatpickr.js"></script>
<link rel="stylesheet" href="https://gitcdn.xyz/cdn/chmln/flatpickr/v3.0.7/dist/flatpickr.css">
<link rel="stylesheet" href="https://gitcdn.xyz/repo/picnicss/picnic/master/picnic.min.css">

<div class=flatpickr>
    <input type="text" placeholder="2011-12-24" data-input> <!-- input is mandatory -->

    <a class="button button-example" title="toggle" data-toggle>
        calendar
    </a>
</div>

CSS

.button-example {
  float: right
}

JavaScript

const fp = flatpickr(".flatpickr", {
	wrap: true,
  allowInput: true,
  clickOpens: true,
  onChange: function(selDates, dateStr) {
    console.log('onChange')
  },
  onClose: function(selDates, dateStr) {
    console.log('onClose')
  },
});