Svelte 5 Unsafe State Mutation at Tree Component

I need help with Svelte components. I've built a tree that should allow users to check nodes and update related nodes. When a node is checked, its parents and children should react accordingly. However, it's not working as expected, and I consistently receive state_unsafe_mutation warnings, even though I'm not using $derived.

Here is the Code:

<script>import { Button } from '$lib/components/ui/button/index.js';        import Node from './Node.svelte';        import { createEventDispatcher } from 'svelte';        import { Checkbox } from '$lib/components/ui/checkbox/index.js';        import { Label } from '$lib/components/ui/label/index.js';        import { slide } from 'svelte/transition';        import { ChevronDown } from 'lucide-svelte';        // /** @type {{tree: any}} */        let open = $state(false);        let indeterminate = $state(false);        let { checked = $bindable(false), name = 'Unnamed', tree, updateParent } = $props();        function toggleOpen() {            open = !open;        }        function toggleIndeterminate() {            indeterminate = !indeterminate;            checked = false;        }        function onCheckedChange() {            if (tree) {                for (var node of tree) {                    node.checked = checked;                    if (name != 'root') updateParent();                }            }        }        function updateState() {            console.log(name);            if (tree) {                for (var child of tree) {                    console.log(child.label + child.checked);                }                if (tree.every((child) => child.checked === true)) {                    checked = true;                    indeterminate = false;                } else if (tree.every((child) => child.checked === false && child.indeterminate === false)) {                    checked = false;                    indeterminate = false;                } else {                    indeterminate = true;                }                if (name != 'root') updateParent();            }        }</script><!--      --><div class="w-full"><div class="w-[13rem] pt-2"><Button                class="flex w-full items-center justify-between px-4 py-2 text-sm  {checked                    ? 'checked'                    : indeterminate                        ? 'indeterminate'                        : 'unchecked'}"><div class="flex items-center gap-2"><Checkbox {onCheckedChange} class="checkbox" bind:checked bind:indeterminate></Checkbox><span onclick={updateState}>{name}</span></div><!-- Rechte Seite (z. B. Shortcut, Badge oder anderes Icon) -->                {#if tree}<div class="text-xs" onclick={toggleOpen}><ChevronDown                            class={`transition-transform duration-300 ${open ? 'rotate-0' : '-rotate-90'}`}                        /></div>{/if}</Button></div>        {#if open}<div class="pl-8" transition:slide>                {#each tree as node}<Node                        updateParent={updateState}                        bind:checked={node.checked}                        name={node.label}                        tree={node.children}></Node>                {/each}</div>        {/if}</div>