Ok so i have this component variable with React.JSX.Element[] inside it, i want to convert this to a string so i can extract it from a diff website, and render it the same.

Some context on why... so basically our cms has a rich text editor which it returns a very complicated json format. I convert these into normal react nodes in a serializer on my wiki. Now we are working on a new blogs feature which uses the same cms and th esame rich text.. but we want to render it on a diff domain then my wiki. So i thought of making a page which converts the blog rich text into html, dumps it into the page as string and i can fetch the page from my diff frontend and convert it back to react nodes and render them

export const dynamic = "force-dynamic";

import { notFound } from "next/navigation";

import React from "react";
import { serializeLexical } from "../../[category]/[link]/serilazer/serializeLexical";
import { GetBlogData } from "./getData";

export default async function ArticlePage({
  params,
}: {
  params: { link: string };
}) {
  // const authToken = headers().get("Authorization");
  // console.log(authToken);
  //if (authToken !== process.env.API_KEY) redirect("/");
  const parsedArticle = await GetBlogData(params.link);

  if (parsedArticle.disabled) notFound();

  const serialized = await serializeLexical(parsedArticle);
  const component = serialized.map((element, i) => {
    console.log(element);
    return <React.Fragment key={i}>{element}</React.Fragment>;
  });
  console.log(component);

  return (
    <div className="w-full min-h-[100svh] h-fit flex flex-col items-center justify-start">
      <h1 className="text-shades-white text-4xl">Blog</h1>

      {component}
    </div>
  );
}

but i dont get how do i make component a string implement which i can convert back to jsx elements in my other domain