Slot "default" invoked outside of the render function

<script setup lang="ts">
import {
  Dialog,
  DialogBackdrop,
  DialogCloseTrigger,
  DialogContent,
  DialogPositioner,
  DialogTitle,
  DialogTrigger,
} from '@ark-ui/vue'

withDefaults(defineProps<{
  maxWidth?: string
}>(), {
  maxWidth: '28rem',
})
</script>

<template>
  <Dialog
    v-slot="{ isOpen }"
    :close-on-interact-outside="true"
    :close-on-escape-key-down="true"
  >
    <!-- Trigger -->
    <DialogTrigger>
      <div>
        <slot />
      </div>
    </DialogTrigger>
    <!-- Dialog -->
    <Teleport to="body">
      <DialogBackdrop />
      <DialogPositioner v-if="isOpen" class="dialog-container">
        <DialogContent class="dialog-content" :style="{ maxWidth }">
          <!-- Header -->
          <div class="dialog-header">
            <DialogTitle class="dialog-title">
              <slot name="title" />
            </DialogTitle>
            <DialogCloseTrigger>
              <div class="close-trigger">
                <Icon name="cross" size="1.2em" />
              </div>
            </DialogCloseTrigger>
          </div>
          <!-- Content -->
          <slot name="content-container">
            <div class="scroll-container">
              <slot name="content" />
            </div>
          </slot>
          <!-- Footer -->
          <div class="dialog-footer">
            <slot name="footer" />
          </div>
        </DialogContent>
      </DialogPositioner>
    </Teleport>
  </Dialog>
</template>

<script setup lang="ts">
import {
  Dialog,
  DialogBackdrop,
  DialogCloseTrigger,
  DialogContent,
  DialogPositioner,
  DialogTitle,
  DialogTrigger,
} from '@ark-ui/vue'

withDefaults(defineProps<{
  maxWidth?: string
}>(), {
  maxWidth: '28rem',
})
</script>

<template>
  <Dialog
    v-slot="{ isOpen }"
    :close-on-interact-outside="true"
    :close-on-escape-key-down="true"
  >
    <!-- Trigger -->
    <DialogTrigger>
      <div>
        <slot />
      </div>
    </DialogTrigger>
    <!-- Dialog -->
    <Teleport to="body">
      <DialogBackdrop />
      <DialogPositioner v-if="isOpen" class="dialog-container">
        <DialogContent class="dialog-content" :style="{ maxWidth }">
          <!-- Header -->
          <div class="dialog-header">
            <DialogTitle class="dialog-title">
              <slot name="title" />
            </DialogTitle>
            <DialogCloseTrigger>
              <div class="close-trigger">
                <Icon name="cross" size="1.2em" />
              </div>
            </DialogCloseTrigger>
          </div>
          <!-- Content -->
          <slot name="content-container">
            <div class="scroll-container">
              <slot name="content" />
            </div>
          </slot>
          <!-- Footer -->
          <div class="dialog-footer">
            <slot name="footer" />
          </div>
        </DialogContent>
      </DialogPositioner>
    </Teleport>
  </Dialog>
</template>