How can I save the the data?

Hi, I am using the nextjs to launch editorjs features. I could able to add header, text in a paragraph. but that content i not being saved to blocks. Any help would bb apprecited.

Console.log
```
[HMR] connected
editorjs.mjs:99 Editor.js 2.27.2 «blocks.stretchBlock()» is deprecated and will be removed in the next major release. Please use the «BlockAPI» instead.
ge @ editorjs.mjs:99
Ie @ editorjs.mjs:233
stretchBlock @ editorjs.mjs:2009
stretchBlock @ editorjs.mjs:1884
eval @ bundle.js:10
Promise.then (async)
value @ bundle.js:10
eval @ bundle.js:10
set @ bundle.js:10
e @ bundle.js:10
create @ editorjs.mjs:8349
processTool @ editorjs.mjs:6744
processTools @ editorjs.mjs:6838
prepare @ editorjs.mjs:6768
eval @ editorjs.mjs:9324
Promise.then (async)
eval @ editorjs.mjs:9322
start @ editorjs.mjs:9321
eval @ editorjs.mjs:9239
Promise.then (async)
pi @ editorjs.mjs:9238
fi @ editorjs.mjs:9395
initializeEditor @ EditorComponent.js:87
await in initializeEditor (async)
eval @ EditorComponent.js:151
commitHookEffectListMount @ react-dom.development.js:23150
commitPassiveMountOnFiber @ react-dom.development.js:24926
commitPassiveMountEffects_complete @ react-dom.development.js:24891
commitPassiveMountEffects_begin @ react-dom.development.js:24878
commitPassiveMountEffects @ react-dom.development.js:24866
flushPassiveEffectsImpl @ react-dom.development.js:27039
flushPassiveEffects @ react-dom.development.js:26984
eval @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
editorjs.mjs:99 Editor.js 2.27.2 «blocks.stretchBlock()» is deprecated and will be removed in the next major release. Please use the «BlockAPI» instead.
ge @ editorjs.mjs:99
Ie @ editorjs.mjs:233
stretchBlock @ editorjs.mjs:2009
stretchBlock @ editorjs.mjs:1884
eval @ bundle.js:10
Promise.then (async)
value @ bundle.js:10
eval @ bundle.js:10
set @ bundle.js:10
e @ bundle.js:10
create @ editorjs.mjs:8349
processTool @ editorjs.mjs:6744
processTools @ editorjs.mjs:6838
prepare @ editorjs.mjs:6768
eval @ editorjs.mjs:9324
Promise.then (async)
eval @ editorjs.mjs:9322
start @ editorjs.mjs:9321
eval @ editorjs.mjs:9239
Promise.then (async)
pi @ editorjs.mjs:9238
fi @ editorjs.mjs:9395
initializeEditor @ EditorComponent.js:87
await in initializeEditor (async)
eval @ EditorComponent.js:151
commitHookEffectListMount @ react-dom.development.js:23150
invokePassiveEffectMountInDEV @ react-dom.development.js:25154
invokeEffectsInDev @ react-dom.development.js:27351
commitDoubleInvokeEffectsInDEV @ react-dom.development.js:27330
flushPassiveEffectsImpl @ react-dom.development.js:27056
flushPassiveEffects @ react-dom.development.js:26984
eval @ react-dom.development.js:26769
workLoop @ scheduler.development.js:266
flushWork @ scheduler.development.js:239
performWorkUntilDeadline @ scheduler.development.js:533
2editorjs.mjs:99 Editor.js 2.27.2 I'm ready! (ﾉ◕ヮ◕)ﾉ*:･ﾟ✧
EditorComponent.js:117 Editor.js is ready to work!
EditorComponent.js:123 Block Holder:

​
EditorComponent.js:124 Block Name: paragraph
EditorComponent.js:125 Block Is Empty: true
EditorComponent.js:126 Block Is Selected: false
EditorComponent.js:132 About to save the editor content...
editorjs.mjs:99 [Editor.js saving]:
EditorComponent.js:137 Article data: {time: 1691740818969, blocks: Array(0), version: '2.27.2'}
EditorComponent.js:117 Editor.js is ready to work!
EditorComponent.js:123 Block Holder: ​
EditorComponent.js:124 Block Name: paragraph
EditorComponent.js:125 Block Is Empty: true
EditorComponent.js:126 Block Is Selected: false
EditorComponent.js:132 About to save the editor content...
editorjs.mjs:99 [Editor.js saving]:
EditorComponent.js:137 Article data: {time: 1691740818971, blocks: Array(0), version: '2.27.2'}
```

Code
```
import React, { useEffect, useRef } from "react";
import dynamic from "next/dynamic";

const loadEditor = () =>
import("@editorjs/editorjs").then((module) => module.default);
const loadHeader = () =>
import("@editorjs/header").then((module) => module.default);
const loadList = () =>
import("@editorjs/list").then((module) => module.default);
const loadChecklist = () =>
import("@editorjs/checklist").then((module) => module.default);
const loadEmbed = () =>
import("@editorjs/embed").then((module) => module.default);
const loadLinkTool = () =>
import("@editorjs/link").then((module) => module.default);
const loadQuote = () =>
import("@editorjs/quote").then((module) => module.default);
const loadRawTool = () =>
import("@editorjs/raw").then((module) => module.default);
const loadImage = () =>
import("@editorjs/image").then((module) => module.default);
const loadTable = () =>
import("@editorjs/table").then((module) => module.default);
const loadDelimiter = () =>
import("@editorjs/delimiter").then((module) => module.default);
const loadNestedList = () =>
import("@editorjs/nested-list").then((module) => module.default);
const loadTextVariantTune = () =>
import("@editorjs/text-variant-tune").then((module) => module.default);
const loadUnderline= () =>
import("@editorjs/underline").then((module) => module.default);
const loadInlineCode= () =>
import("@editorjs/inline-code").then((module) => module.default);
const loadCodeTool= () =>
import("@editorjs/code").then((module) => module.default);
const loadWarning= () =>
import("@editorjs/warning").then((module) => module.default);
const loadMarker= () =>
import("@editorjs/marker").then((module) => module.default);
const loadAttachesTool= () =>
import("@editorjs/attaches").then((module) => module.default);
const loadTranslate= () =>
import("@editorjs/translate-inline").then((module) => module.default);
const loadEditorjsCodeflask= () =>
import("@calumk/editorjs-codeflask").then((module) => module.default);

// Load @editorjs/paragraph dynamically using 'dynamic'
const loadParagraph = dynamic(
() => import("@editorjs/paragraph").then((module) => module.default),
{ ssr: false } // Disable server-side rendering for this dynamic import
);

function EditorComponent() {
const editorRef = useRef(null);

useEffect(() => {
const initializeEditor = async () => {
const [EditorJS, Header, List, Checklist, Table, Image, Attachment,
Translate, Nestedlist, Linktool, Quote, Raw, TextVariant, Underline,
InlineCode, Code, CodeEditor, Warning, Marker] = await Promise.all([
loadEditor(),
loadHeader(),
loadList(),
loadChecklist(),
loadTable(),
loadImage(),
loadAttachesTool(),
loadTranslate(),
loadNestedList(),
loadLinkTool(),
loadQuote(),
loadRawTool(),
loadTextVariantTune(),
loadUnderline(),
loadInlineCode(),
loadCodeTool(),
loadEditorjsCodeflask(),
loadWarning(),
loadMarker(),
]);

if (editorRef.current) {
const editor = new EditorJS({
holder: editorRef.current,
tools: {
list: {
class: List,
class: Translate,
class: Quote,
class: TextVariant,
class: InlineCode,
class: Underline,
class: Marker,
inlineToolbar: true,
},
paragraph: loadParagraph,
header: Header,
table: Table,
attachment: Attachment,
checklist: Checklist,
nestedlist: Nestedlist,
image: Image,
raw: Raw,
code: Code,
multicode: CodeEditor,
warning: Warning,
linktool: Linktool,

// Add more tools as needed
},

onReady: async () => {
console.log("Editor.js is ready to work!");

// Use editor.blocks.getBlockByIndex(0) to access BlockAPI
const block = await editor.blocks.getBlockByIndex(0);

if (block) {
console.log("Block Holder:", block.holder);
console.log("Block Name:", block.name);
console.log("Block Is Empty:", block.isEmpty);
console.log("Block Is Selected:", block.selected);

// Change stretched state of the block
block.stretched = true; // Set the stretched property to true

// Log a message just before calling editor.save()
console.log("About to save the editor content...");

// Now you can call editor methods, like save(), here
editor.save()
.then((outputData) => {
console.log("Article data: ", outputData);
// Here you can perform actions with the saved data
})
.catch((error) => {
console.log("Saving failed: ", error);
});
}
},
});

// More editor initialization code...
}
};

initializeEditor();
}, []);

return

;
}

export default EditorComponent;
```