diff --git a/Document-Processing/code-snippet/document-editor/react/base-cs2/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/base-cs2/app/index.jsx
index 23c7f55c4..c1fcfa1bd 100644
--- a/Document-Processing/code-snippet/document-editor/react/base-cs2/app/index.jsx
+++ b/Document-Processing/code-snippet/document-editor/react/base-cs2/app/index.jsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import { DocumentEditorComponent, Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog } from '@syncfusion/ej2-react-documenteditor';
 DocumentEditorComponent.Inject(Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory, ContextMenu, OptionsPane, HyperlinkDialog, TableDialog, BookmarkDialog, TableOfContentsDialog, PageSetupDialog, StyleDialog, ListDialog, ParagraphDialog, BulletsAndNumberingDialog, FontDialog, TablePropertiesDialog, BordersAndShadingDialog, TableOptionsDialog, CellOptionsDialog, StylesDialog);
 function Default() {
     return (<DocumentEditorComponent id="container" height={'330px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" isReadOnly={false} enablePrint={true} enableSelection={true} enableEditor={true} enableEditorHistory={true} enableContextMenu={true} enableSearch={true} enableOptionsPane={true} enableBookmarkDialog={true} enableBordersAndShadingDialog={true} enableFontDialog={true} enableTableDialog={true} enableParagraphDialog={true} enableHyperlinkDialog={true} enableImageResizer={true} enableListDialog={true} enablePageSetupDialog={true} enableSfdtExport={true} enableStyleDialog={true} enableTableOfContentsDialog={true} enableTableOptionsDialog={true} enableTablePropertiesDialog={true} enableTextExport={true} enableWordExport={true}/>);
 }
 export default Default;
-const root = ReactDOM.createRoot(document.getElementById('sample'));
+const root = createRoot(document.getElementById('sample'));
 root.render(<Default />);
diff --git a/Document-Processing/code-snippet/document-editor/react/base-cs2/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/base-cs2/app/index.tsx
index fb77af9a1..275aa73a6 100644
--- a/Document-Processing/code-snippet/document-editor/react/base-cs2/app/index.tsx
+++ b/Document-Processing/code-snippet/document-editor/react/base-cs2/app/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import {
     DocumentEditorComponent, DocumentEditor, RequestNavigateEventArgs, ViewChangeEventArgs,
     Print, SfdtExport, WordExport, TextExport, Selection, Search, Editor, ImageResizer, EditorHistory,
@@ -23,7 +23,7 @@ function Default() {
     );
 }
 export default Default
-const root = ReactDOM.createRoot(document.getElementById('sample'));
+const root = createRoot(document.getElementById('sample'));
 root.render(<Default />);
 
 
diff --git a/Document-Processing/code-snippet/document-editor/react/base-cs3/app/index.jsx b/Document-Processing/code-snippet/document-editor/react/base-cs3/app/index.jsx
index e5d776daa..30fe2d682 100644
--- a/Document-Processing/code-snippet/document-editor/react/base-cs3/app/index.jsx
+++ b/Document-Processing/code-snippet/document-editor/react/base-cs3/app/index.jsx
@@ -1,10 +1,10 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import { DocumentEditorContainerComponent, Toolbar } from '@syncfusion/ej2-react-documenteditor';
 DocumentEditorContainerComponent.Inject(Toolbar);
 function Default() {
     return (<DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true}/>);
 }
 export default Default;
-const root = ReactDOM.createRoot(document.getElementById('sample'));
+const root = createRoot(document.getElementById('sample'));
 root.render(<Default />);
diff --git a/Document-Processing/code-snippet/document-editor/react/base-cs3/app/index.tsx b/Document-Processing/code-snippet/document-editor/react/base-cs3/app/index.tsx
index 7321086fb..4cd1b9d26 100644
--- a/Document-Processing/code-snippet/document-editor/react/base-cs3/app/index.tsx
+++ b/Document-Processing/code-snippet/document-editor/react/base-cs3/app/index.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import * as ReactDOM from 'react-dom/client';
+import { createRoot } from 'react-dom/client';
 import {
     DocumentEditorContainerComponent, Toolbar
 } from '@syncfusion/ej2-react-documenteditor';
@@ -10,7 +10,7 @@ function Default() {
     <DocumentEditorContainerComponent id="container" height={'590px'} serviceUrl="https://document.syncfusion.com/web-services/docx-editor/api/documenteditor/" enableToolbar={true} />);
 }
 export default Default
-const root = ReactDOM.createRoot(document.getElementById('sample'));
+const root = createRoot(document.getElementById('sample'));
 root.render(<Default />);