ListBox multiple selected props

[zkadam]

Hey, I am trying to create a Listbox where multiple values can be set. I would want to pass already selected values through props to the listbox and I would want the ListboxOptions to be formatted depending on wether they are selected or not. My code seems to be working fine but the first time I open the listbox the selected items don't get the selected formatting and the first selection overwrites the original slected values(instead of adding it or removing it from modelValue). After the first selection the component works as it supposed to. Is there a way to have multiple ListBox selected condition working from the beginning?

<Listbox
        :v-model="modelValue"
        @update:modelValue="
            (value) => {
                $emit('update:modelValue', value);
            }
        "
        multiple
    >
        <ListboxButton class="btnClass">
            {{ modelValue!.map((item) => item.name).join(", ") }}

            <ChevronDownIcon class="w-4 h-4" />
        </ListboxButton>
        <ListboxOptions>
            <ListboxOption
                v-slot="{ selected, active }"
                v-for="item in items"
                :key="item.id"
                :value="item"
            >
                <div
                    :class="[
                        selected && 'selectedClass',
                        active && 'activeClass',
                        !selected && !active && 'defaultClass',
                        ,
                    ]"
                >
                    {{ item.name }}
                    <SelectedIcon v-if="selected" />
                </div>
            </ListboxOption>
        </ListboxOptions>
    </Listbox>