Date picker - calender popover not opening in deployed environment

[lndrj]

I'm having an issue with making the date picker work in deployed environment.
Setting the date via keyboard works, but the moment I click on calendar icon, to open the calendar popover, I get an error to console saying:

Uncaught Error: Unknown date type

Weirdest thing I cant figure out, is that this error only appears, after I deploy the app onto the hosting.
In dev environment it works just fine with no issues.

I am using AWS Amplify for hosting.

Here is my date picker component:

<script lang="ts">
	import { DatePicker } from 'bits-ui';
	import type { DateValue } from '@internationalized/date';
	import { CalendarIcon, ChevronLeft, ChevronRight } from '@lucide/svelte';
	import { locale } from '$lib/translations';
	import { parseDate, today, getLocalTimeZone } from '@internationalized/date';

	let { value = $bindable(), onValueChange } = $props<{
		value?: DateValue;
		onValueChange: (value: DateValue | undefined) => void;
	}>();

	let currentValue = $state<DateValue | undefined>();
	const placeholder = today(getLocalTimeZone());

	let previousValue: DateValue | undefined = undefined;

	$effect(() => {
		if (value === previousValue) return;

		previousValue = value;

		if (value) {
			try {
				if (typeof value === 'string') {
					const dateStr = value.includes('T') ? value.split('T')[0] : value;

					if (/^\d{4}-\d{2}-\d{2}$/.test(dateStr)) {
						currentValue = parseDate(dateStr);
					} else {
						console.warn('Invalid date string format:', dateStr);
						currentValue = undefined;
					}
				} else if (
					value &&
					typeof value === 'object' &&
					'year' in value &&
					'month' in value &&
					'day' in value
				) {
					const dateValue = value as DateValue;
					if (
						typeof dateValue.year === 'number' &&
						typeof dateValue.month === 'number' &&
						typeof dateValue.day === 'number' &&
						dateValue.year > 0 &&
						dateValue.month >= 1 &&
						dateValue.month <= 12 &&
						dateValue.day >= 1 &&
						dateValue.day <= 31
					) {
						currentValue = dateValue;
					} else {
						console.warn('Invalid DateValue object:', value);
						currentValue = undefined;
					}
				} else {
					console.warn('Unsupported date value type:', typeof value, value);
					currentValue = undefined;
				}
			} catch (error) {
				console.error('DatePicker parsing error:', error);
				currentValue = undefined;
			}
		} else {
			currentValue = undefined;
		}
	});

	function handleValueChange(newValue: DateValue | undefined) {
		currentValue = newValue;
		value = newValue;
		onValueChange(newValue);
	}
</script>

<DatePicker.Root
	weekdayFormat="short"
	fixedWeeks={true}
	value={currentValue}
	onValueChange={handleValueChange}
	locale={$locale === 'cs' ? 'cs-CZ' : 'en-US'}
	{placeholder}
>
	<div class="flex w-full flex-col gap-1.5">
		<DatePicker.Input
			class="border-input bg-background ring-offset-background placeholder:text-muted-foreground focus:ring-ring flex h-10 w-full items-center rounded-md border px-3 py-2 text-sm focus:ring-2 focus:ring-offset-2 focus:outline-none disabled:cursor-not-allowed disabled:opacity-50"
		>
			{#snippet children({ segments })}
				{#each segments as { part, value }, i (part + i)}
					<div class="inline-flex items-center select-none">
						{#if part === 'literal'}
							<DatePicker.Segment {part} class="text-muted-foreground px-1">
								{value}
							</DatePicker.Segment>
						{:else}
							<DatePicker.Segment
								{part}
								class="hover:bg-muted focus:bg-muted focus:text-foreground aria-[valuetext=Empty]:text-muted-foreground rounded-md px-1 py-0.5 focus-visible:ring-0 focus-visible:ring-offset-0"
							>
								{value}
							</DatePicker.Segment>
						{/if}
					</div>
				{/each}
				<DatePicker.Trigger
					class="text-muted-foreground hover:bg-muted active:bg-muted/80 ml-auto inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors"
				>
					<CalendarIcon class="h-4 w-4" />
				</DatePicker.Trigger>
			{/snippet}
		</DatePicker.Input>
		<DatePicker.Content sideOffset={6} class="animate-in fade-in-0 zoom-in-95 z-[200] duration-200">
			<DatePicker.Calendar class="border-input bg-background shadow-popover rounded-lg border p-3">
				{#snippet children({ months, weekdays })}
					<DatePicker.Header class="flex items-center justify-between pb-2">
						<DatePicker.PrevButton
							class="hover:bg-muted inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors"
						>
							<ChevronLeft class="h-4 w-4" />
						</DatePicker.PrevButton>
						<DatePicker.Heading class="text-sm font-medium first-letter:uppercase" />
						<DatePicker.NextButton
							class="hover:bg-muted inline-flex h-8 w-8 items-center justify-center rounded-md transition-colors"
						>
							<ChevronRight class="h-4 w-4" />
						</DatePicker.NextButton>
					</DatePicker.Header>
					<div class="flex flex-col space-y-4 pt-2 sm:flex-row sm:space-y-0 sm:space-x-4">
						{#each months as month (month.value)}
							<DatePicker.Grid class="w-full border-collapse space-y-1 select-none">
								<DatePicker.GridHead>
									<DatePicker.GridRow class="mb-1 flex w-full justify-between">
										{#each weekdays as day (day)}
											<DatePicker.HeadCell
												class="text-muted-foreground w-8 rounded-md text-xs font-normal"
											>
												<div>{day.slice(0, 2)}</div>
											</DatePicker.HeadCell>
										{/each}
									</DatePicker.GridRow>
								</DatePicker.GridHead>
								<DatePicker.GridBody>
									{#each month.weeks as weekDates (weekDates)}
										<DatePicker.GridRow class="flex w-full">
											{#each weekDates as date (date)}
												<DatePicker.Cell
													{date}
													month={month.value}
													class="relative h-8 w-8 p-0 text-center text-sm"
												>
													<DatePicker.Day
														class="hover:border-input hover:bg-muted data-selected:bg-primary data-selected:text-primary-foreground data-outside-month:text-muted-foreground inline-flex h-8 w-8 items-center justify-center rounded-md border border-transparent text-sm font-normal transition-colors data-disabled:pointer-events-none data-disabled:opacity-50 data-outside-month:pointer-events-none data-selected:font-medium"
													>
														<div
															class="bg-primary absolute top-1 hidden h-1 w-1 rounded-full group-data-today:block"
														></div>
														{date.day}
													</DatePicker.Day>
												</DatePicker.Cell>
											{/each}
										</DatePicker.GridRow>
									{/each}
								</DatePicker.GridBody>
							</DatePicker.Grid>
						{/each}
					</div>
				{/snippet}
			</DatePicker.Calendar>
		</DatePicker.Content>
	</div>
</DatePicker.Root>

[SymphonySimper]

Same, did you find a solution?