The following code snippet does exactly what I expect, which is to provide a list of 3 items that expands to show the numeral for the written number when clicked. My question is whether a Dictionary is the proper way to track the state?

Do I really have to maintain a copy of the state on this page, or is there a way to bind the click event to directly modify the value of the property on the component rather than a local copy of the status which is bound to the components value?

<div class="row">
    <div class="col">
        <ul>
            @if(Items != null)
            {
                foreach(var kvp in Items)
                {
                    <li @key="kvp.Key" @onclick="@(e => Toggle(kvp.Key))">@kvp.Key <CollapsibleRow @bind-Expanded="expanded[kvp.Key]">@kvp.Value</CollapsibleRow></li>
                }
            }
        </ul>
    </div>
</div>

@code {
    Dictionary<string, bool> expanded = Items.Select(o => new KeyValuePair<string, bool>(o.Key, false)).ToDictionary(kvp => kvp.Key, kvp => kvp.Value);

    void Toggle(string key) 
    {
        
        expanded[key] = !expanded[key]; 
    }

    static Dictionary<string, string> Items = new()
    {
        { "One", "1" },
        { "Two", "2" },
        { "Three", "3" }
    };
}