Is there an .on("hidden") event in jQuery UI datepicker?

Question

From what I've seen in the documentation, there's no such thing, but maybe I'm missing something.

The setup is as follows.

var dateToday = new Date();
var dates = $("#from, #to").datepicker({
    defaultDate: "+1w",
    changeMonth: true,
    numberOfMonths: 1,
    minDate: dateToday
});

$(document).on("DOMSubtreeModified",function() {
  if($("#ui-datepicker-div").length > 0 && $("#ui-datepicker-div").is(":visible")) {
    $("#redSquare").addClass("none");
  } else {
    setTimeout(function() {
      $("#redSquare").removeClass("none");
    },2000);
  }
});

.none {
  display: none !important;
}
#redSquare {
  display:block;
  margin-top:25px;
  margin-left:35px;
  height:50px;
  width:50px;
  background-color:red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<label for="from">From</label> 
<input type="text" id="from" name="from"/>
<label for="to">to</label>
<input type="text" id="to" name="to"/>
<div id="redSquare"></div>

The red square should be hidden if the datepicker calendar / div is present in DOM and visible. Once the datepicker is hidden, the red square should reappear.

I'm guessing the hiding part doesn't work as I'm expecting it to, because the disappearing animation for the datepicker calendar / div is not complete once the checking occurs.

Can I use (and if I can, how) something akin to Bootstrap's .on("bs.hidden", function(){...}), to achieve what I need, or do I have to rely on the current setTimeout solution (not very reliable)?

I guess I could try and override the .hide(...) event, as shown in this answer, but I'd like to avoid that, if possible.