Why isn’t value assigned and cleared here?

I’m trying Svelte 5 for the first time today.

This is a reproduction of this issue.

As you can see if I select a date from the picker the {value} is not assigned and the same if I press the “Clear” button.

Why?

Relevant code

<script lang="ts">
    type Props = {
        value?: Date | null;
        id?: string;
        onchange?: (e: Date | undefined) => void;
    };

    let {
        value = $bindable(),
        id,
        onchange,
    }: Props = $props();

    $effect(() => {
        console.log('value in $effect:', value);
    });

    $inspect(value);

    const format = (date: typeof value): string => {
        if (!date) return '';

        if (date instanceof Date && isNaN(date.getTime())) return '';

        return new Date(date.getTime() - date.getTimezoneOffset() * 60000).toISOString().slice(0, -8);
    };

    function handleOnChange(e: Event) {
        const dateValue = new Date((e.target as HTMLInputElement).value);

        console.log('handleOnChange:', dateValue);

        value = dateValue;

        if (onchange) onchange(dateValue);
    }

    function handleClear() {
        console.log('handleClear :');

        value = undefined;

        if (onchange) onchange(value);

        (document.getElementById(id) as HTMLInputElement).value = '';
    }
</script>

<div>
    {value}

    <button type="button" onclick={handleClear}>Clear</button>

    <input
        type="datetime-local"
        {id}
        value={format(value)}
        onchange={handleOnChange}
    />
</div>