How to iterate over an object reactively?

I need to iterate over an object. The object is declared with:

const obj = $state({ 
    one: { checked: true }, 
    two: { checked: false }, 
    three: { checked: true } 
});

In my Svelte templating code, I do this:

{#each Object.entries(obj) as [key, value]}
        <div class="mb-8">
            {key}: {value.checked}
            <input type="checkbox" {value} onchange={e => obj[key].checked = e.target.checked}>
        </ion-toggle>
    </div>
{/each}

Checking the checkbox does update the value of one of the items of my object, but does not change the value of {value.checked} in the DOM. My suspicion is that obj itself is reactive, but value within obj is not. How do I fix this?

(Note: I'm actually using Ionic and <ion-toggle> instead of <input type="checkbox"> - I know there is a better way to bind the value (bind:value), but this method works throughout the rest of my app for <ion-toggle>.)

I have also attempted making the obj a SvelteMap<string, ClassVersion>, where ClassVersion is:

class MyObj {
   checked = $state(false);
}

The object is reactive.

Make sure to set all relevant properties to ensure that data does not go out of sync, e.g. here you are not setting the checked property of the input, so changes are only propagated outward.

<input type="checkbox"
  checked={value.checked}
  ... >

Playground