Date range picker pro: switching timezones will result in invalidRange error

[xli12]

Steps to reproduce

You may reproduce it in this CodeSandbox environment: https://codesandbox.io/p/sandbox/f6whfj

1. Open the sandbox. By default the time range picker uses UTC.
2. Use the date range selector to select the same day as start and end, for example, 11/11/2025 (click it twice)
3. After successfully selecting the date range, you'll see the date you have selected in the input box
4. Now click another timezone. It does not matter whether it is Los Angeles or Amsterdam (in my case I choose Los Angeles). Purpose: update the timezone property value for the MUI date range picker. Purpose: update the timezone property value for the <DateRangePicker> component.
5. Open the calendar, and select another date, twice (for example, clicking 12/11/2025 twice)
6. You'll see a complaint invalidRange under the input box (see the image below)
7. After inspecting the console, you see the values:

['2025-11-12T00:00:00.000Z', '2025-11-11T08:00:00.000Z']
['invalidRange', 'invalidRange']

This means: the 1st value is taking UTC (the start of 12 Nov in UTC), whereas the 2nd value it is still using the timezone UTC (indicating by the Z at the end), but... this is the start of 12 Nov in UTC, and finding the corresponding time in Los Angeles.

Current behavior

After switching the timezone, if I select the same day from the calendar input, I see invalidRange error.

See also the "Steps to reproduce" section for more details.

Expected behavior

After switching the timezone, I expect to be able to successfully selecting the time range, from the beginning of the day in my specified timezone, to the end of the day in the same timezone.

Context

I want to perform date range selection. It includes both the same date selection and a date range selection.

Your environment

npx @mui/envinfo

  System:
    OS: Linux 6.10 Debian GNU/Linux 13 (trixie) 13 (trixie)
  Binaries:
    Node: 22.21.1 - /usr/local/bin/node
    npm: 10.9.4 - /usr/local/bin/npm
    pnpm: Not Found
  Browsers:
    Chrome: Not Found
    Firefox: Not Found
  npmPackages:
    @emotion/react: ^11.14.0 => 11.14.0 
    @emotion/styled: ^11.14.0 => 11.14.0 
    @mui/core-downloads-tracker:  7.3.1 
    @mui/icons-material: ^7.3.1 => 7.3.1 
    @mui/lab: ^7.0.0-beta.14 => 7.0.0-beta.14 
    @mui/material: ^7.3.1 => 7.3.1 
    @mui/private-theming:  7.3.1 
    @mui/styled-engine:  7.3.1 
    @mui/system:  7.2.0 
    @mui/types:  7.4.5 
    @mui/utils:  7.3.5 
    @mui/x-charts:  8.19.0 
    @mui/x-charts-pro: ^8.19.0 => 8.19.0 
    @mui/x-charts-vendor:  8.19.0 
    @mui/x-data-grid: ^8.21.0 => 8.21.0 
    @mui/x-date-pickers:  8.19.0 
    @mui/x-date-pickers-pro: ^8.19.0 => 8.19.0 
    @mui/x-internal-gestures:  0.3.6 
    @mui/x-internals:  8.19.0 
    @mui/x-license: ^8.21.0 => 8.21.0 
    @mui/x-telemetry:  8.19.0 
    @mui/x-virtualizer:  0.2.11 
    @types/react: ^19.2.2 => 19.2.2 
    react: ^19.2.0 => 19.2.0 
    react-dom: ^19.2.0 => 19.2.0 
    typescript: ^5.9.2 => 5.9.2

Search keywords: date range picker, timezone

Order ID: 114468