Mermaid not rendering graph using render method version 10

Question

I am trying to render a graph with mermaid version 10. Below is my code:

<script type="module">
    import mermaid from 'https://cdn.jsdelivr.net/npm/mermaid@10/dist/mermaid.esm.min.mjs';
    mermaid.initialize({startOnLoad: true});
    document.addEventListener("DOMContentLoaded", async function () {
      let element = document.querySelector("#flowchart");
      const { svg, bindFunctions } = await mermaid.render('flowchart', 'graph TD;\nA-->B');
      element.innerHTML = svg;
      bindFunctions?.(element);
    
  });
  </script>

I am not getting any error on the console. But the graph doesn't get rendered either. When I checked the DOM tree on browser, I noticed that the element with id flowchart is deleted from the document. I have tried everything possible, but version 10 doesn't seem to work. Version 7 is working, but it has many limitations as compared to 10.

Please help me to identify the issue as I am unable to figure out what might be getting wrong.

Thanks!