Using vue3 component in sweetalert2 content

Question

I'm trying to use a Vue3 component inside the Sweetalert2 modal. It would be something like this:

<template>
  <div id="test-component">
    <h1>Yeey!</h1>
  </div>
</template>

<script>
export default {
  name: "TestComponent",
};
</script>

TestComponent.vue

and in other component use sweetalert modal like:

<script>
import Swal from "sweetalert2";
import TestComponent from "@/components/TestComponent";

export default {
  name: "OtherComponent",
  methods: {
    clickAction() {
      Swal.fire({ html: '<TestComponent />' });
    }
  }
};
</script>

I don't even know if this is possible, but I saw a couple of examples using Vue2 so, here I am trying to figure out how to do that on Vue3.

Doing this way, the sweetalert is displayed empty, and inside the swal2-html-container has:

<div class="swal2-html-container" id="swal2-html-container" style="display: block;">
  <testcomponent></testcomponent>
</div>

Without rendering the actual component.