VueJs Transition Not working as Dynamic component

Question

Goal:

Use dynamic components to create custom reusable transition components for Vue V3.
vue2-transitions npm package uses the same method as below and it does not work with v3, So I decided to make a simple one for myself.

CustomTransition.Vue

<component
  :is="group ? 'transition-group' : 'transition'"
  enter-active-class="fadeInDown"
  leave-active-class="fadeOutUp"
>
  <slot></slot>
</component>

SomeOtherComponent.vue

<div>
  <custom-transition>
    <span v-if="show">This does not work.</span>
  </custom-transition>
</div>

This does not work, I have no clue why. The <transition> element is rendered like this.

<transition
  enter-active-class="fadeInDown"
  leave-active-class="fadeOutUp"
>
      <span>This does not work.</span>
</transition>

But,

When I rewrite the CustomComponent.vue like this.

<transition
  enter-active-class="fadeInDown"
  leave-active-class="fadeOutUp"
>
  <slot></slot>
</transition>

It is working perfectly fine.

Edit

I've Added a JSFiddle, in case someone wants to try something out.

Answer 1

Finally found the solution from vue community. link to working jsfiddle

For this component to work:

<component
  :is="group ? 'transition-group' : 'transition'"
  enter-active-class="fadeInDown"
  leave-active-class="fadeOutUp"
>
  <slot></slot>
</component>

Import the Transition and TransitionGroup components explicitly in the component and register them.

import { Transition, TransitionGroup } from 'vue'

export default {
  components: {
    Transition,
    TransitionGroup,
  },
  data() {
    return { show: false };
  }
}

link to github issue in vue-next repo.