If I render 3-4 diagrams on a page in React or Next.js, the diagrams intermittently get mixed up with each other.

[RohitKumarKhatri]

If I render 3-4 diagrams on a page in React or Next.js, the diagrams intermittently get mixed up with each other.

• I see another root element is added in svg of diagram at the top.
• You can see in the screenshot, two diagrams are getting mixed.
  Version "mermaid": "^11.3.0",

'use client';
import { useLayoutEffect, useState } from 'react';
import mermaid from 'mermaid';
import { mermaidTheme } from '@/assets/css/mermaidTheme';

export default function MermaidComponent({
  code,
  index,
}: {
  code: string;
  index: string;
}) {
  const [isClient, setIsClient] = useState(false);

  useLayoutEffect(() => {
    setIsClient(true);
  }, []);

  useLayoutEffect(() => {
    if (isClient) {
      const initializeMermaid = () => {

        mermaid.initialize({
          startOnLoad: false, 
          theme: 'base',
          themeVariables: mermaidTheme,
        });


        const mermaidContainer = document.getElementById(
          `mermaid-diagram-${index}`
        );
        if (mermaidContainer) {
          mermaidContainer.innerHTML = `<div class="mermaid">${code}</div>`; 


          try {
            mermaid.run();
          } catch (err) {
            console.error('Mermaid diagram rendering error:', err);
            mermaidContainer.innerHTML = 'Invalid syntax';
          }
        }
      };

      initializeMermaid(); 

      return () => {
        const mermaidContainer = document.getElementById(
          `mermaid-diagram-${index}`
        );
        if (mermaidContainer) {
          mermaidContainer.innerHTML = ''; 
        }
      };
    }
  }, [isClient, code, index]);

  return isClient ? (
    <div
      id={`mermaid-diagram-${index}`}
      className="mermaid-container"
      key={index}
    />
  ) : null;
}