Vitest: Wrapper doesn't show "teleported" HTML - vue.js

Question

imagine we have two components, Modal.vue which is lets say a component that is used to display modal content (uses slots to take in JSX), and Component.vue which is the one with content we wish to test with vitest/jest:
//Modal.vue
<template>
<div>
<slot name="header" />
<slot />
<slot name="footer" />
</div>
</template>
//component.vue
<template>
<Modal>
<template #header>
<h1>Hello world</h1>
</template>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
<template #footer>
<button>Great</button>
</template>
</Modal>
</template>
The problem is that I cannot reach the wrapper HTML within my test, as it will console log something similar to this:
// snipet from the test file
...
it('should mount Component.vue', () => {
console.log(wrapper.html())
expect(wrapper).toBeTruthy()
})
...
The console.log in the test will result to this:
<div>
<!---->
<!--teleport start-->
<!--teleport end-->
<!---->
</div>
Question is: How can I access the wrapper HTML that is define in 'Component.vue'??