在ReactJS的monaco编辑器中添加美人鱼语法

我try 通过摩纳哥-美人鱼将美人鱼语法添加到摩纳哥-EDITOR中，如果返回错误:

enter image description here个

这是我的代码:

import React, { useEffect, useRef } from "react";

import * as monaco from 'monaco-editor';

import initEditor from 'monaco-mermaid';

import './style.css';

const Editor = (props) => {

    const { className, handleChangeCode, handleDownload } = props;
    // comment

    const editorRef = useRef(null);

    useEffect(() => {
        const editorContainer = document.getElementById('monaco-mermaid');
        const monacoEditor = monaco.editor.create(editorContainer, {
            language: 'mermaid',
            minimap: {
                enabled: false
            },
            fontWeight: '600',
            fontSize: '14px',
            overviewRulerLanes: 0,
            quickSuggestions: false,
        });
        initEditor(monacoEditor);
    },[])

    return (
        <div id="editor" ref={editorRef} className="editor">
            <div className="editor-top">
                <div className="icon">Code</div>
            </div>
            <div id="monaco-mermaid" style={{height: '600px'}}></div>
            <div className={`editor-bottom`}>
                <div className="png-button" onClick={() => handleDownload('svg')}>
                    Save as SVG
                </div>
                <div className="png-button" onClick={() => handleDownload('png')}>
                    Save as PNG
                </div>
                <div className="png-button" onClick={() => handleDownload('clipboard')}>
                    Copy to clipboard
                </div>
            </div>
        </div>
    );
};

export default Editor;

我的摩纳哥编辑版本是:0.34.0，摩纳哥-美人鱼:1.0.8.请帮帮我！