Create accordion layour in vue3. Use provide/injecvt

Как реализовать работу аккардиона на основе provide/inject? В такой разметки на страннице

<Accordion>
    <AccordionItem>
        <AccordionTitle>
            Title 1
        </AccordionTitle>
        <AccordionBody>
            Content
        </AccordionBody>
    </AccordionItem>
</Accordion>

Пример кода как у меня работает сейчас

<template>
  <slot />
</template>

<script>
  export default {
  name: 'Accordion',
 };
</script>


<script>
 import { ref } from 'vue';

export default {
 name: 'AccordionItem',

 setup(props, { slots }) {
      const isActive = ref(false);
      const toggle = () => {
        isActive.value = !isActive.value;
      };

      return () => slots.default({
        isActive: isActive.value,
        toggle,
      });
    },
  };
</script>