Element Plus component do not render correctly when I pass child component to createVnode

[tsunemori-akane]

here is the code in sandbox

Here is what render in my browser, seems they do not know "el-" element plus UI component or not import the style

App.vue

<script setup lang="ts">
import useDialog from "./components/dialog/useDialog";
import test from "./components/test.vue"

const handleClick = () => {
  useDialog(test, {})
}
</script>

<template>
  <div>
    <el-button @click="handleClick" type="primary">showDialog</el-button>
  </div>
</template>

useDialog.ts

import customizeDialog from './customizeDialog.vue'
useDialog(component, options = {}) {
    //...
    const container = document.createElement('div')
    document.querySelector('body').appendChild(container)
    const vm = createVNode(customizeDialog, {
        customizeCom: component,   //test.vue is passed into 
        ...propsOptions,
    })
    render(vm, container)
}

customizeDialog.vue

<template>
    <el-dialog>
    <template #default>
        <div>
          <component
            :is="customizeCom"
            :data="data"
            @cancel="onCancelCalled"
            @submit="onSubmitCalled"
          />
        </div>
      </template>
    </el-dialog>
</template>
<script lang="ts" setup>
const props = defineProps({
    customizeCom: {
      type: [Object, String],
      default: () => 'div'
    },
// ...
})
</script>

test.vue

<template>
    <el-button type="primary">0</el-button>
    <test1 :col="col"></test1>
</template>

<script setup lang="ts">
import { ref } from "vue";
import test1 from "./test1.vue"
import { ElInput, ElSwitch} from 'element-plus'
const col = ref([
    {
        type: ElSwitch,
        name: "1"
    },
    {
        type: "el-select",
        name: "2"
    },
    {
        type:  ElInput,
        name: "3"
    }
])
</script>

test1.vue

<template>
    <div v-for="e in col">
      <component :is="e.type" v-model="e.name"></component>
    </div>
</template>

<script setup lang="ts">

const props = defineProps({
  col: Object
})
</script>

Is there anybody can help me?

[tsunemori-akane]

use app.component() to register globally