Is it possible to create a custom extension using React Components (JSX)?

[blindibrasil]

Marked version:
"marked": "^11.2.0"

Describe the bug
Is it possible to create a custom extension using React components?
I'm trying to do this and only [object Object] appears in the text content.

To Reproduce

const glossaryExtension = {
    name: "glossary",
    level: "inline", 
    start(src: any) {
      return src.match(/::glossary::/)?.index;
    },
    tokenizer(src: any) {
      const rule = /^::glossary::([^:\n]+)::/;  
      const match = rule.exec(src);
      if (match) {
        return {
          type: "glossary",
          raw: match[0],
          text: match[1].trim(),
        };
      }
      return undefined;
    },
    renderer(token: any) {
      return (
        <HoverCard openDelay={0}>
          <HoverCardTrigger className="Trigger" asChild>
            <a
              className="underline decoration-[var(--theme-colors-foreground-primary)] decoration-dotted underline-offset-4 focus:text-[var(--theme-colors-foreground-primary)]  hover:bg-[var(--yellow-highlighter)]  GlossaryTooltip_trigger__CdKW_"
              data-state="closed"
              href="/glossary/front-end"
            >
              ${token.text}
            </a>
          </HoverCardTrigger>

          <HoverCardPortal>
            <HoverCardContent variant="link" side="top">
              <div className=" GlossaryTooltip_overlay__6Rv7d">
                <header className="md:py-[1.8rem] md:px-4 p-4 bg-[var(--theme-colors-background-neutral-hover)] relative GlossaryTooltip_header__Gdfia">
                  <span className="text-[var(--theme-colors-foreground-tertiary)] m-0 text-[length:0.75rem] tracking-[0.24px] font-sans font-medium leading-[1.3] uppercase GlossaryTooltip_super__wbrM2 brand_label-5__s61LB">
                    Glossary definition
                  </span>
                  <h3 className="text-[var(--theme-colors-foreground-primary)] m-0 text-balance lg:text-[length:1.75rem] font-sans text-[length:1.5rem] font-normal -tracking-[0.02em] leading-[1.1] GlossaryTooltip_title__qWQT4 brand_heading-4__MyHtq">
                    Front end definition
                  </h3>
                  <button
                    className="hidden GlossaryTooltip_close__K_lOo"
                    aria-label="Close"
                  >
                    <svg 
                      width="1em"
                      height="1em"
                      viewBox="0 0 25 25"
                      fill="none"
                      xmlns="http://www.w3.org/2000/svg"
                    >
                      <path
                        d="M18 7L7 18M7 7L18 18"
                        stroke="currentColor"
                        stroke-width="1.2"
                        stroke-linejoin="round"
                      ></path>
                    </svg>
                  </button>
                </header>
                <div className="p-4 GlossaryTooltip_body__hLwWV">
                  <p className=" mb-4 text-[length:1rem] font-sans font-normal leading-[1.5] tracking-normal GlossaryTooltip_description__xB2zG brand_text-3__JoPaz">
                    Front end refers to the user-facing components of a website
                    or application, created using technologies like HTML, CSS,
                    and JavaScript.
                  </p>
                  <div className="rounded-[var(--border-radius--base)] flex items-center outline-none no-underline text-[length:var(--text4-font-size)] leading-[var(--text4-line-height)] text-[var(--fg2)] ">
                    <span className="font-semibold flex-nowrap">
                      Read the full definition
                    </span>
                    <ArrowUpRight className="ml-2" color="#F36458" />
                  </div>
                </div>
              </div>
            </HoverCardContent>
          </HoverCardPortal>
        </HoverCard>
      );
    },
  };

 marked.use({
      renderer,
      extensions: [glossaryExtension],
    });

const raw = marked(props.source, {
      gfm: true,
    });

    return (
      <div
        dangerouslySetInnerHTML={{ __html: raw }}
        className={`markdown  ${props.className ?? ""}`}
      />
    );

Expected behavior
What I expected was for the extension to accept the React component because it's a very simple component that just opens a popover when you hover the mouse over the word, showing its meaning.

[UziTech]

Similar to #2915