something went wrong when use 'useSlots()' in vue3

Question

https://play.vuejs.org/#eNqVU8tu2zAQ/JUFe7ANGNKhPRmygaZIgfbQBnWPugjS2mFKkQS5ch0I+vcuqYclNAmQk0HOcHdmPGrFZ2uTS4NiJzLC2qqC8JBrgOyrdJ7uzDWe+Dyi8KHCU9Eo2ueiBZI1QpeLgcW8Sl6gVIX3jBNeaYYxag/hxQ7a8WmXpXZOOGJpdMV7QRc18gxvaqwKKnhOlk7obV/KC0eN6dJCOvOwwDJfOmkJPFITtsvaGkcw0uHkTA2rZHofElpNtJvEkTfdDMQs7RccxFbMZ/yf8jwtnkGF1OjmcXplKEYV4jRV8byF+BPjCOBgtU9h4fJVny00Ho/81kM3eOh1swLP7IjsJ9J60yNGYaLMeR3xZGjBesPo3C955p7kOXnyRrPhNugL5morFbqfliTPygV3oDeZi0Ip8/d7vCPX4Ha8Lx+x/PPC/ZO/hrtcPDj06C6Yiwmjwp2RSxfg++OPWMAJrE3VKGa/Af5C9tkEjT3trtEVy57xotpvMUmpz7/9/ZVQ+9FUEBqYXeTngoP98ob1m9yPyaf4Ltcdp7ho1Htr84gOQfr4lYWviL+yd5RkrIF1xoYa8B/N0x/CaR11h5GTBXq2fDiS4yyGiIZm7GC9gf1hJAI4XuA0rLho4Rg1BbuLAnX/AJiihYk=

// App.vue
<template>
  <FirstBox>
    // no error on this
    // <template>
    // error on this
    <template #default="{ time }">
      <div class="text">
        <p>time: {{ time }}</p>
        <SecondBox name="somedata"></SecondBox>
      </div>
    </template>
  </FirstBox>
</template>
<script setup>
import FirstBox from './FirstBox.vue'
import SecondBox from './SecondBox.vue'
</script>

// FirstBox 
<template>
  <div class="container">
      <slot time="today, today"></slot>
  </div>
</template>

<script setup>
import { useSlots } from 'vue'
const slots = useSlots()
console.log(slots.default()) // (destructured parameter) is undefined
</script>

// SecondBox
<template>
  <div class="container">
    here is: {{ name }}
  </div>
</template>

<script setup>

const props = defineProps({
  name: {
    type: String,
    default: () => {
      return ''
    }
  }
})
</script>

i try to get the name value on SecondBox by using useSlots().default() at FirstBox.vue but there is an error on console: '(destructured parameter) is undefined', i find out this is in App.vue when i use '#default="{ time }"' i dont know what to do now...