Невозможно использовать TransitionGroup в функции рендеринга при создании собственного компонента вкладок

Как я написал в заголовке, я пытаюсь создать свои собственные компоненты вкладок. Пока это очень просто:

Tabs.vue

setup(props, { slots }) {
  const { activeTab } = toRefs(props);
  provide("activeTab", activeTab);

  const newSlots = slots.default().map((slot, index) => {
    return h(slot, {
      index, // for each tab to know, whether is active
      key: index, // for TransitionGroup
    });
  });

  return () =>
    h(
      TransitionGroup,
      {
        name: "tabs-fade",
      },
      () => newSlots
    );
}

Tab.vue

<template>
  <div v-if = "activeTab === index">
    <slot />
  </div>
</template>

setup() {
  const activeTab = inject("activeTab");

  return {
    activeTab,
  };
},

И я планировал использовать его так: Testing.vue

<ul>
  <li @click = "activeTab = 0">1</li>
  <li @click = "activeTab = 1">2</li>
  <li @click = "activeTab = 2">3</li>
</ul>
<Tabs :activeTab = "activeTab">
  <Tab> 1 </Tab>
  <Tab> 2 </Tab>
  <Tab> 3 </Tab>
</Tabs>

Без TransitionGroup все работает нормально, хотя когда пытаюсь его добавить для более плавного перехода, выдает ошибку при попытке переключения между вкладками:

[Vue warn]: Unhandled error during execution of render function 
  at <TransitionGroup name = "tabs-fade" > 
  at <Tabs activeTab=1 > 
  at <Testing> 
  at <App>

[Vue warn]: Unhandled error during execution of scheduler flush. This is likely a Vue internals bug. Please open an issue at https://new-issue.vuejs.org/?repo=vuejs/core 
  at <TransitionGroup name = "tabs-fade" > 
  at <Tabs activeTab=1 > 
  at <Testing> 
  at <App>
Uncaught (in promise) TypeError: child.el.getBoundingClientRect is not a function