I have copied the code from Metronic 9 for datepicker, particularly on this section

<Popover>
<PopoverTrigger asChild>
<button
id="date"
className={cn(
'input data-[state=open]:border-primary',
!date && 'text-muted-foreground'
)}
>
<KeenIcon icon="calendar" className="-ms-0.5" />
{date ? format(date, 'LLL dd, y') : <span>Pick a date</span>}
</button>
</PopoverTrigger>
<PopoverContent className="w-auto p-0" align="start">
<Calendar
initialFocus
mode="single" // Single date selection
defaultMonth={date}
selected={date}
onSelect={setDate}
// numberOfMonths={2}
/>
</PopoverContent>
</Popover>


After selecting the date, the calendar remains open and does not close. The intended behaviour is for the calendar to close after a date has been selected. To close the calendar, the user would need to click outside the calendar again.

How can I configure it to achieve this effect?