Hydration mismatch when using Reusable Transition with v-if

[dvdmlln]

Vue version

3.2.36

Link to minimal reproduction

https://stackblitz.com/edit/github-96ft3e-z7szup

Steps to reproduce

1. Create a reusable transition with a default slot

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

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

<template>
  <div>
    <CustomTransition>
      <div v-if="showData">test</div>
    </CustomTransition>
</template>

What is expected?

No warning

What is actually happening?

Hydration children mismatch: server rendered element contains fewer child nodes than client vdom.

System Info

No response

Any additional comments?

v-show instead of v-if is working as expected