Materialize Datepicker set date on open

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.css">
<input class="datepicker" id="date_picker_1" type=text value="2021-05-12"/>
<input class="datepicker" id="date_picker_2" type=text value="2021-05-25"/>

CSS

body {
  padding: 3em;
}

JavaScript

var date_picker_1;
var date_picker_2;
var datepickerOptions = {
  format: 'yyyy-mm-dd',
  autoClose: "true",
  firstDay: 1,
  onOpen: function(arg) {
    console.log(arg)
  }
}


document.addEventListener('DOMContentLoaded', function() {
  var elems = document.querySelectorAll('.datepicker');
  var instances = M.Datepicker.init(elems, datepickerOptions);
  date_picker_1 =  M.Datepicker.getInstance(document.getElementById("date_picker_1"));
  date_picker_2 =  M.Datepicker.getInstance(document.getElementById("date_picker_2"));
  date_picker_1.setDate(new Date("2021-05-12"));
  date_picker_2.setDate(new Date("2021-05-25"));
});