How to use TSX component in vuepress-vite?

[SituC]

This is my vue3 button component which created by vite

import { defineComponent } from 'vue'

const TpButton = defineComponent({
    name: 'TpButton',
    setup(props, { slots }) {
    return () => (
      <button class='btn, btn-1'>button</button>
    )
  }
})

export default TpButton

It can be used on Vue3 pages
But when i want to use this component in vuepress-vite, it gives me a mistake like this:

So, what can i do for this mistake...please give me some helps

Or if you have VuePress solution for TSX , please show me

[SituC]

I have found the answer to this question.
We can use configuration like this in config.ts.

import { defineUserConfig } from 'vuepress-vite'
import type { DefaultThemeOptions, ViteBundlerOptions } from 'vuepress-vite'

export default defineUserConfig<DefaultThemeOptions, ViteBundlerOptions>({
  bundler: '@vuepress/vite',
  bundlerConfig: {
    // vite options
    viteOptions: {
      // tsx support
      esbuild: {
        jsxFactory: 'h',
        jsxFragment: 'Fragment',
        jsxInject: "import { h } from 'vue'"
      },
    }
  },
})