Setting Default Month causes UTC Timezone to not work

[romerorisa]

I'm currently using DayPicker and I have it like this

<DayPicker
    mode='single'
    timeZone='UTC'
    captionLayout='dropdown'
    selected={new Date(Date.parse(selectValue))}
/>

selectValue is a string and the value is 2024-09-14
the value in selected when I output it into the console is this Fri Sep 13 2024 19:00:00 GMT-0500 (Central Daylight Time) and it's working as expected because the selected date is Sep 14th 2024:

However, when I specify the default month to be the same as the selected value like so

<DayPicker
  mode='single'
  timeZone='UTC'
  captionLayout='dropdown'
  selected={new Date(Date.parse(selectValue))}
  defaultMonth={new Date(Date.parse(selectValue))}
/>

the UTC timezone doesn't work anymore and it's back to being CDT or the selected date is now 13th Sept 2024, as shown by the calendar below:

Did I do something wrong? Or is this a bug? Thanks.

[gpbl]

@romerorisa When working with timezones, you should use TZDate instead of Date:

https://daypicker.dev/docs/time-zone#working-with-time-zoned-dates

- import { DayPicker } from 'react-day-picker';
+ import { DayPicker, TZDate } from 'react-day-picker';

<DayPicker
    mode='single'
    timeZone='UTC'
    captionLayout='dropdown'
-   selected={new Date(Date.parse(selectValue))}
+   selected={new TZDate(year, month, day, timezone)}
/>

Please note that TZDate initializer is different from Date:

https://date-fns.org/v4.1.0/docs/Time-Zones#working-with-time-zones