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/[email protected]
├── [email protected]