How to remain reactivity in SvelteMap between components

I have three files:

App.svelte:

<script>    import Component from "./Component.svelte"    import { items } from "./store.js"    $items.set("a", { name: "John", index: "a" })    $items.set("b", { name: "Jack", index: "b" })</script><h1>DIV each:</h1>{#if $items && $items.size > 0}    {#each $items.values() as item}<div>Name: {item.name}</div>    {/each}{/if}<h1>Component each:</h1>{#if $items && $items.size > 0}    {#each $items.values() as item}<div><Component index={item.index} /></div>    {/each}{/if}

Component.svelte:

<script>    import { items } from "./store.js"    let { index = null } = $props()    let data = $state($items.get(index))</script><div><input bind:value={data.name} /></div>

store.js:

import { writable } from "svelte/store";import { SvelteMap } from "svelte/reactivity";export let items = writable(new SvelteMap([]))

I wonder how to remain reactivity in SvelteMap items. When input value is changed, it should update in SvelteMap (as it is binded). I don't know how to work with this kind of reactivity.

Playground here.