Date picker appears at bottom of page before click

I am currently using datepicker on my site with the following code:

$(function(){
	$("#attrib-23-0").attr( 'readOnly' , 'true' );
    $('#attrib-23-0').datepicker({ 
	  dateFormat: 'MM dd, yy',
	  beforeShowDay: function(date){
var string = jQuery.datepicker.formatDate('mm/dd/yy', date);
var day = date.getDay();
return [ ( day > 0 && day < 6 && dates.indexOf(string) == -1), "" ];
	}
});
    var dates = ["07/14/2023","2023-07-04", "04-07-2023", "07/05/2023", "07/04/2023","07/06/2023","07/03/2023","07/07/2023"];
	
    var d = new Date();
    var targetTimeOffset  = +6*60; //desired time zone, taken as GMT-4
    d.setMinutes(d.getMinutes() + d.getTimezoneOffset() + targetTimeOffset );
    $( "#attrib-23-0" ).datepicker( "option", "minDate", d );
});

When the page is first accessed, the calendar is displayed at the bottom of the page. Once the input field is clicked, the calendar is displayed correctly and the one at the bottom of the page disappeared.

Is this a known bug ? or is there a way to fix it?

An sample page can be seen here: https://www.royal-fleur.com/all-flowers/above-larkspur-sunset-bouquet

Thank you in advance for the help.

Reproduce the behavior on the linked sample page using the datepicker initialization shown in the issue. Inspect the initial calendar rendering and compare it with the state after clicking #attrib-23-0. Done means the calendar is not visibly rendered at the bottom of the page before the input is clicked, while still opening correctly on interaction.