Vue version

3.2.41

Link to minimal reproduction

https://stackblitz.com/edit/github-96ft3e-hemmf1?file=src%2FCustomTransition.vue

Steps to reproduce

1. Create a reusable transition-group with a default slot

<template>
  <transition-group name="custom-transition">
    <slot />
  </transition-group>
</template>

2. Use this transition with v-if inside the slot

<template>
  <div>
    <button @click="showData = !showData">Toggle</button>
    <CustomTransition>
      <div v-if="showData">test</div>
    </CustomTransition>
  </div>
</template>

What is expected?

No warning

What is actually happening?

[Vue warn]: Hydration children mismatch in <div>: server rendered element contains more child nodes than client vdom.

System Info

No response

Any additional comments?

Excactly the same issue with "Transition" instead of "TransitionGroup" was already fixed: https://github.com/vuejs/core/issues/5991 The example is also nearly the same.

Duplicate of https://github.com/vuejs/core/issues/6715