Error Cannot read properties of undefined (reading 'createElementNS') in accessing mermaid library

Question

I am trying to render mermaid diagram on webpage dynamically using react js, but I am getting this error - Cannot read properties of undefined (reading 'createElementNS'). is this problem of version of react js or mermaid library? How should I solve this problem?

I am passing diagram code as prop from other component

`import React, { useEffect, useState } from 'react';
 import mermaid from 'mermaid';

mermaid.initialize({
  startOnLoad: true,
  securityLevel: 'loose',
  fontFamily: 'monospace',
  logLevel: 5
});

const Mermaid = (props) => {
  const [mermaidCode, setMermaidCode] = useState(props.chart);

  useEffect(() => {
    const mermaidContainer = document.getElementById('mermaid');

    if (mermaidContainer) {
      mermaidContainer.removeAttribute('data-processed');
      mermaid.render('mermaid', mermaidCode, (svgCode) => {
        mermaidContainer.innerHTML = svgCode;
        mermaid.contentLoaded();
      });
    }
  }, [mermaidCode]);

  return (
    <div id="mermaid" className="mermaid"></div>
  );
};`

So diagram should render on webpage instead getting this error - Cannot read properties of undefined (reading 'createElementNS'), how to solve this?