Chakra UI DatePicker: keeping a UTC-stored date on the same calendar day for all users

Goal

I store all dates in my backend as UTC ISO 8601 strings (e.g., 2026-10-13T00:00:00Z) and want the Chakra UI DatePicker to display that exact calendar day to every user, regardless of whether their browser is set to UTC-8, UTC, or UTC+5:30. When the user picks a date, I need to convert the selection back to a UTC midnight instant for storage.

Constraints and uncertainty

From the documentation, the DatePicker only accepts JavaScript Date objects for value and defaultValue, and onChange returns a Date. Constructing a Date from my UTC string resolves to an instant that, when rendered in a local timezone, can fall on the previous or next calendar day. I cannot find any prop on the component to pin a display timezone or to control the conversion, and formatting appears to go through date-fns using only the environment locale. Assume Chakra UI v2/v3-era DatePicker behavior; I can verify by rendering value={new Date('2026-10-13T00:00:00Z')} while switching my OS timezone.

Questions

• Is there a supported way to make the DatePicker render a fixed calendar day independent of the user's timezone, or must all offset handling live in application code?
• What is the recommended conversion boundary: shift the UTC instant to local-midnight before passing it in, or reinterpret the onChange result on the way out?
• Does using date-fns-tz alongside the picker risk inconsistencies with its internal formatting?