Why boolean resets in Svelte Store?

I have SvelteStore with object ChatStyle. The issue occurs with Toggle component. The block $: called three times:

1. isAlternateBackgroundColor = undefined (as expected before init)
2. isAlternateBackgroundColor = true (from SvelteStore with ChatStyle)
3. isAlternateBackgroundColor = false (I dont understand why)

According logs the value saved with true value and restore after reload page. But the third called re-saved the value to false. The calls occurs in a row, I dont click anything. The other values of ChatStyle save and restore as expected.

I tried to add/remove bind: prefix in different combination. But in this case update value isn't trigger update the store.

<script type="ts">  import { Toggle, Label } from '../components/index'  import { Writable, writable } from 'svelte/store'  import { getSvelteStore, getValue, SvelteStore } from '../../modules/storage'  import { ChatStyle } from '../../modules/storage'  export let chatStyleStore: SvelteStore<ChatStyle> = writable(undefined)  let chatStyle: ChatStyle = {    marginBottom: undefined,    paddingY: undefined,    borderWidth: undefined,    isAlternateBackgroundColor: undefined,    backgroundColorHex: '',  }  function initValues(initChatStyle: ChatStyle) {    chatStyle = initChatStyle  }  $: {    if (typeof chatStyle.isAlternateBackgroundColor != 'boolean') {      console.log('not init')    } else {      console.log(chatStyle)      chatStyleStore.set({        marginBottom: chatStyle.marginBottom,        paddingY: chatStyle.paddingY,        borderWidth: chatStyle.borderWidth,        isAlternateBackgroundColor: chatStyle.isAlternateBackgroundColor,        backgroundColorHex: chatStyle.backgroundColorHex      })    }  }</script>{#await getValue('chatStyle') then initChatStyle }  {#if initValues(initChatStyle) }  {/if}<Toggle id='isAlternateBackgroundColor' bind:checkedBoolean={chatStyle.isAlternateBackgroundColor} title="" />{/await}

// Toogle element<script lang="ts">  import { Helper, Toggle } from 'flowbite-svelte'  import { writable, Writable } from 'svelte/store'  import { CustomStore } from '../../modules/storage'  import Label from '../components/Label.svelte'  export let id = 'checkbox'  export let checkedStore: Writable<boolean> | CustomStore<boolean>  export let checkedBoolean: any  export let title = 'Title'  export let description = 'Description'</script><div class="relative flex items-center">  {#if checkedStore && checkedStore.subscribe } <Toggle size="small" {id} bind:checked={$checkedStore} class="dark:peer-focus:ring-transparent" />  {:else}<Toggle size="small" {id} bind:checked={checkedBoolean} class="dark:peer-focus:ring-transparent" />  {/if}<Label for={id} class="w-full" color="title"><span>{title}</span><span><Helper>{@html description}</Helper></span></Label></div>

function createSvelteStore<K extends keyof BrowserStorage, V extends BrowserStorage[K]>(key: K, value: V): SvelteStore<V> {    const { subscribe, set: setSvelteStore } = writable<V>(value)    const setBrowserStorageWithDebounce = debounce((newValue: V) => {        if (instance[key]!.value !== newValue             || ((Array.isArray(newValue) || typeof newValue == 'object') && JSON.stringify(instance[key]!.value ) != JSON.stringify(newValue))) {            console.log('old', instance[key]!.value, 'new', newValue)            setValue(key, newValue)        }    })    return {        subscribe,        setExceptBrowser: setSvelteStore,        set: (value: V) => {            setSvelteStore(value)            setBrowserStorageWithDebounce(value)        }    }}