如何在React Markdown编辑器中渲染MermaidJS？

我需要在ReactMarkdown Viewer中实现MermaidJS的渲染功能，现有示例项目可参考，启动步骤如下：

• npm install
• npm start
• 访问localhost:5173/app
• 编辑src/components/MarkdownViewer.tsx中的MarkdownViewer组件

核心代码如下：

<ReactMarkdown className="grid-none border-gray-100 border-2 rounded-2xl pl-4 pt-2 pb-2 pr-4 overflow-auto"
               children={text}
               components={{
                    code({node, inline, className, children, ...props}) {
                       const match = /language-(\w+)/.exec(className || '')
                       return !inline && match ? (
                           <SyntaxHighlighter
                               children={String(children).replace(/\n$/, '')}
                               language={match[1]}
                               PreTag="div"
                               {...props}
                           />
                       ) : (
                           <code className={className} {...props}>
                               {children}
                           </code>
                       )
                   }
               }}
                   remarkPlugins={[remarkMath, remarkGfm]}
        rehypePlugins={[rehypeKatex,rehypeRaw]}
/>

我已经尝试过以下方法，但均未成功：

• 使用mermaid.render()，但它直接操作DOM，且代码不完整时会抛出异常
• 多款已废弃的Mermaid插件，无法适配最新Node版本（如react-mermaid2依赖冗余，react-mermaid-pro不支持Node16及以上版本）

内容的提问来源于stack exchange，提问作者SamTV