How can I handle styling of returned chunks in real time while streaming? as codeblock, inline code and ect

Hi, I have problem to style openai GPT api like it is in ChatGPT, which returned chunks in real time on my next js project, so i tryed to pass chunks to SyntaxHighlighter but because response of AI is returned as small chunks I did not manage to style it properly, for example codeBlock, inline code and ect
here is small example of AI response tich backticks and other characters:

  1. ** Create a Project Directory:** If you haven’t already set up a project directory, create a new directory for your Node.js Express project. You can do this using the following command: bash mkdir odd-number-finder cd odd-number-finder 2. ** Initialize a Node.js Project:** Initialize a new Node.js project in your project directory by running:```bash npm init -y````

How can I handle this situation? because just passing chunks to SyntaxHighlighter is not gonna work.

const MarkdownRenderer = ({ content }) => {
  const CodeBlock = ({ className, children }) => {
    const language = className?.replace("language-", "") || "";
    const code = String(children);
    return (
      <SyntaxHighlighter language={language} style={atomDark}>

  return (
    <div className="markdown prose w-full break-words">
        remarkPlugins={[remarkGfm, remarkMath]}
        rehypePlugins={[rehypeKatex, rehypeHighlight]}
          code: ({ node, inline, className, children, ...props }) => {
            if (inline) {
              return <code className={className}>{children}</code>;
            return <CodeBlock className={className}>{children}</CodeBlock>;
          p: ({ children }) => (
            <p className="whitespace-pre-wrap">{children}</p>