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);}