How to externally set calendar value in primereact?

Question

I added a couple buttons to the calendar footer, just to set the value to a specific date. The date is declared with usestate, and when I click the button, the value of the date variable is set appropriately, I also see the calendar UI changing the highlighted day, although I need to use setState() on the calendar to move the UI to the new month/year if that's required. The overall structure is like this:

const [date, setDate] = useState<Date | Date[]>(new Date());
const presetDate = new Date(2021,4,2);
const calendar = useRef<Calendar>(null);

const setCalendarValue = (targetDate: Date) => {
    setDate(targetDate);
    let calendarState = calendar.current?.state;
    calendar.current?.setState({
        focused: calendarState?.focused ?? false,
        overlayVisible: calendarState?.overlayVisible ?? false,
        viewDate: targetDate
    });
}

const calendarFooter = () => {
    return (
        <>
            <Button label="Preset date" onClick={() => setCalendarValue(presetDate) }
        </>
    )
}
retun(
    <>
        <Calendar
            ref={calendar}
            field="date"
            label="Date"
            id="date"
            minDate={new Date(2000,0,1)}
            value={date?? undefined}
            onChange={(e) => setDate(e.value || new Date())}           
        />
    </>
);

Everything works except that the textbox with the date does not show the newly assigned date until the calendar is closed, then reopened, and the button clicked a second time. Specifically in this order.

So far as I understand, I need to cause the input event on the calendar, but I can't seem to find out how it's done, and the event dispatcher is not exposed, even though I do see it in the source of the calendar component itself.