ok so im currently using dangerouslySetInnerHTML a bunch of html (stringified)
Now i wanna use

import { Code } from "bright";

But to actually use it.. i need to make a tsx file and use it as a element, so thats what i did

import { Code } from "bright";
import { renderToStaticMarkup } from "react-dom/server";

export function CodeElement({
  language,
  code,
}: {
  language: string;
  code: string;
}) {
  const string = renderToStaticMarkup(<Code lang={language}>{code}</Code>);
  return string;
}

renderToStaticMarkup: https://react.dev/reference/react-dom/server/renderToStaticMarkup
(Chatgpt showed me it, looks correct here)

I call this function from here

import { CodeElement } from "./codeElement";
export function CodeHTML({ node }: { node: any }) {
  console.log(node);

  const codeStrings = node.fields["Code Blocks"].map((field: any) => {
    /*  console.log(
        field.blockType.toLowerCase(),
        field[field.blockType.toLowerCase()]
      );
      */

    const string = CodeElement({
      language: field.blockType.toLowerCase(),
      code: field[field.blockType.toLowerCase()],
    });
    return string;
  });

  return codeStrings.join("\n");
}

But when i use it.. i get this error

  × You're importing a component that imports react-dom/server. To fix it, render or return the content directly as a Server Component instead for perf and security.
  │ Learn more: https://nextjs.org/docs/getting-started/react-essentials
   ╭─[C:\Users\arinj\OneDrive\Desktop\docs\src\app\en\article\[link]\serilazer\converters\blocks\code\codeElement.tsx:1:1]
 1 │ import { Code } from "bright";
 2 │ import { renderToStaticMarkup } from "react-dom/server";
   · ────────────────────────────────────────────────────────
 3 │
 4 │ export function CodeElement({
 4 │   language,
   ╰────

Any idea on how do i do this correctly?

TLDR: I need to return a string form of the code element, but also use the Code element
(use client wont work)