How can i use flatUnwrap() with useSlots() composable?

[mfazail]

I am trying to get details of code passed to default slot from mdc component. Below code is working fine, I am getting details of code, but a warning too. Please let know what am i doing wrong.

[Vue warn]: Slot "default" invoked outside of the render function: this will not track dependencies used in the slot. Invoke the slot function inside the render function instead.

<script setup>
const { flatUnwrap } = useUnwrap();
const slots = useSlots();
const node = flatUnwrap(slots.default(), ["pre"]);
const filename = node[0].props.filename;
</script>

<template>
<div class="relative z-0">
	<h6 class="absolute top-2 right-2 text-xs z-10 text-white">{{ filename}}</h6>
	<Markdown :use="()=>node" unwrap="pre" />
</div>
</template>

With below code no warning showing

<script setup>
const { flatUnwrap } = useUnwrap();
</script>

<template>
    <div class="relative z-0">
        <h6 class="absolute top-2 right-2 text-xs z-10 text-white">
            {{ flatUnwrap($slots.default(),['pre'])[0].props.filename }}
        </h6>
        <Markdown :use="$slots.default" unwrap="pre" />
    </div>
</template>