Vue3 + tsx 如何定义作用域插槽参数的类型?

在 vue3 + ts 中假设我需要一个作用域插槽，并且需要传递一些参数，当使用模版语法时，可以得到正确的ts类型提示。

<script lang="ts" setup>
import { ref } from 'vue';

  const data = ref('data')
  const content = ref('content')
</script>

<template>
  <div>
    ScopedSlots
    <slot name="content" :data="data" :content="content" />
  </div>
</template>

<script setup lang="ts">
import ScopedSlots from '@/components/ScopedSlots.vue';
import ScopedSlotsTSX from '@/components/ScopedSlotsTSX';

</script>

<template>
  <main>
    HomeView

    <ScopedSlots>
      <!-- 
        可以得到正确的类型提示
        (property) content: {
          data: string;
          content: string;
        } 
      -->
      <template #content="{ data, content }">
        {{ data }} {{ content }}
      </template>
    </ScopedSlots>
  </main>
</template>

但是使用 tsx 语法时，以下的写法不能正确的得到类型提示(content 提示为 any)：

import { defineComponent, ref } from "vue";

export default defineComponent({
    setup (props, { slots }) {
        const content = ref("content")
        const data = ref("data")

        return function render () {
            return (
                <div>
                    ScopedSlotsTSX

                    { slots.content ? slots.content({ data, content }) : null }
                </div>
            )
        }
    }
})

<script setup lang="ts">
import ScopedSlots from '@/components/ScopedSlots.vue';
import ScopedSlotsTSX from '@/components/ScopedSlotsTSX';

</script>

<template>
  <main>
    HomeView

    <ScopedSlotsTSX>
      <!-- content 类型显示为 any -->
      <template #content="data">
        {{ data }}
      </template>
    </ScopedSlotsTSX>
  </main>
</template>

想问下，使用 tsx 时，如何定义作用域插槽传递的参数的类型？

下面是在线预览地址 codesandbox