MultiRootEditor Non Existent Root Error on getData()

[amankapur]

Trying to follow the official guide https://ckeditor.com/docs/ckeditor5/latest/getting-started/installation/react/react-multiroot.html with two way binding disabled to have a controlled component.

However, on trying to access the data via getData() function on the editor instance, I get datacontroller-get-non-existent-root error.

import { useMultiRootEditor } from '@ckeditor/ckeditor5-react';
import 'ckeditor5/ckeditor5.css';

import {
    MultiRootEditor,
    AccessibilityHelp,
    Alignment,
    Autosave,
    Bold,
    Essentials,
    FindAndReplace,
    FontFamily,
    FontSize,
    GeneralHtmlSupport,
    HorizontalLine,
    ImageBlock,
    ImageInline,
    ImageResize,
    ImageStyle,
    ImageToolbar,
    ImageUpload,
    Indent,
    IndentBlock,
    Italic,
    List,
    ListProperties,
    Paragraph,
    PasteFromOffice,
    SelectAll,
    SourceEditing,
    SpecialCharacters,
    SpecialCharactersArrows,
    SpecialCharactersCurrency,
    SpecialCharactersEssentials,
    SpecialCharactersLatin,
    SpecialCharactersMathematical,
    SpecialCharactersText,
    Strikethrough,
    Subscript,
    Superscript,
    Table,
    TableCaption,
    TableCellProperties,
    TableColumnResize,
    TableProperties,
    TableToolbar,
    Underline,
    Undo
} from 'ckeditor5';

export default function EditorBox({data, onChange}) {

    const editorConfig = {
        toolbar: {
            items: [
                'undo',
                'redo',
                '|',
                'sourceEditing',
                'findAndReplace',
                '|',
                'fontSize',
                'fontFamily',
                '|',
                'bold',
                'italic',
                'underline',
                'strikethrough',
                'subscript',
                'superscript',
                '|',
                'specialCharacters',
                'horizontalLine',
                'insertTable',
                '|',
                'alignment',
                '|',
                'bulletedList',
                'numberedList',
                'outdent',
                'indent',
            ],
            shouldNotGroupWhenFull: true
        },
        plugins: [
            AccessibilityHelp,
            Alignment,
            Autosave,
            Bold,
            Essentials,
            FindAndReplace,
            FontFamily,
            FontSize,
            GeneralHtmlSupport,
            HorizontalLine,
            ImageBlock,
            ImageInline,
            ImageResize,
            ImageStyle,
            ImageToolbar,
            ImageUpload,
            Indent,
            IndentBlock,
            Italic,
            List,
            ListProperties,
            Paragraph,
            PasteFromOffice,
            SelectAll,
            SourceEditing,
            SpecialCharacters,
            SpecialCharactersArrows,
            SpecialCharactersCurrency,
            SpecialCharactersEssentials,
            SpecialCharactersLatin,
            SpecialCharactersMathematical,
            SpecialCharactersText,
            Strikethrough,
            Subscript,
            Superscript,
            Table,
            TableCaption,
            TableCellProperties,
            TableColumnResize,
            TableProperties,
            TableToolbar,
            Underline,
            Undo
        ],
        fontFamily: {
            supportAllValues: true
        },
        fontSize: {
            options: [10, 12, 14, 'default', 18, 20, 22],
            supportAllValues: true
        },
        htmlSupport: {
            allow: [
                {
                    name: /^.*$/,
                    styles: true,
                    attributes: true,
                    classes: true
                }
            ]
        },
        image: {
            toolbar: ['imageTextAlternative', '|', 'imageStyle:inline', 'imageStyle:wrapText', 'imageStyle:breakText', '|', 'resizeImage']
        },
        list: {
            properties: {
                styles: true,
                startIndex: true,
                reversed: true
            }
        },
        // placeholder: 'Type or paste your content here!',
        table: {
            contentToolbar: ['tableColumn', 'tableRow', 'mergeTableCells', 'tableProperties', 'tableCellProperties']
        }
    };

    const editorProps = {
        editor: MultiRootEditor,
        data,
        config: editorConfig,
        disableTwoWayDataBinding: true,
        onChange: (event, editor) =>  {onChange(editor.getData())},
    }
    const {
        toolbarElement,
        editableElements
    } = useMultiRootEditor(editorProps);

    return (
        <div>
            {toolbarElement }
            {editableElements}
        </div>
    );
}

Error as follows:

CKEditorError: datacontroller-get-non-existent-root
Read more: https://ckeditor.com/docs/ckeditor5/latest/support/error-codes.html#error-datacontroller-get-non-existent-root
    at DataController.get (ckeditor5.js?v=656b2241:33234:13)
    at DataController.<anonymous> (ckeditor5.js?v=656b2241:10111:37)
    at DataController.fire (ckeditor5.js?v=656b2241:9769:35)
    at <computed> [as get] (ckeditor5.js?v=656b2241:10114:21)
    at MultiRootEditor.getData (ckeditor5.js?v=656b2241:46639:22)
    at Object.onChange (EditorBox.jsx?t=1730107742558:186:23)
...

Versions:

├── @ckeditor/ckeditor5-react@9.3.1
├── ckeditor5@43.2.0