Привет. Делаю выпадающее меню. Есть SidebarComponent, в котором статично заданы items

Question

Привет. Делаю выпадающее меню. Есть SidebarComponent, в котором статично заданы items

= reactive([{}...]). В template секции рендерю компонент списка: <SidebarNavigationComponent :items='items'></SidebarNavigationComponent>. Внутри компонента списка есть const props = defineProps(['items', 'isOpen']);, а в шаблоне <ul class='sidebar-navigation' :class='{open: isOpen}'>. Сам шаблон рендерит LI: <SidebarNavigationItemComponent v-for='item in items' :item='item'></SidebarNavigationItemComponent>. В котором есть код:
const isGroup = props.item.items.length > 0;
const isOpen = ref(false);
const openSubmenu = () => {
isOpen.value = !isOpen.value;
}
а в шаблоне:
<template>
<li class='nav-item color-white' v-if='isGroup' @click='openSubmenu'>
<p>{{ props.item.name }}</p>
<SidebarNavigationComponent :isOpen='isOpen' :items='props.item.items'></SidebarNavigationComponent>
</li>
<li class='nav-item color-white' v-else>
<a :href="props.item.link" class='color-white'>{{ props.item.name }}</a>
</li>
</template>

Вопрос, почему, когда я открываю первый вложенный, то все хорошо, а когда второй вложенный, то закрывается первый, а второй остается видимым. Как это исправить?