React-ckeditor5 : CKEditorError: datacontroller set -non-existent- root :尝试在不存在的根上设置数据

import React, { Component } from 'react';
import CKEditor from '@ckeditor/ckeditor5-react';
import ClassicEditor from '@ckeditor/ckeditor5-build-classic';

class MyEditor extends Component {
  constructor(props) {
    super(props);
    this.editorRef = React.createRef();
  }

  componentDidMount() {
    // 初始化CKEditor实例
    ClassicEditor.create(this.editorRef.current)
      .then(editor => {
        console.log('Editor initialized', editor);
      })
      .catch(error => {
        console.error('Error initializing editor', error);
      });
  }

  componentWillUnmount() {
    // 销毁CKEditor实例
    if (this.editorRef.current) {
      this.editorRef.current.editorInstance.destroy()
        .then(() => {
          console.log('Editor destroyed');
        })
        .catch(error => {
          console.error('Error destroying editor', error);
        });
    }
  }

  render() {
    return (
      <div>
        <h1>My Editor</h1>
        <CKEditor
          editor={ClassicEditor}
          data="<p>Hello, CKEditor!</p>"
          ref={this.editorRef}
        />
      </div>
    );
  }
}

export default MyEditor;