Nextjs useState delays when type CKeditor5 input - react-hooks

Question

Created ckeditor 5 component separately and included other component
import React from "react";
import EditorCustom from "ckeditor5-custom-build/build/ckeditor";
import { CKEditor } from "#ckeditor/ckeditor5-react";
import { fileStorage } from "../../../firebase/firebase.config";
import { ref, uploadBytes, getDownloadURL } from "firebase/storage";
class MyUploadAdapter {
constructor(loader) {
this.loader = loader;
}
// Starts the upload process.
upload() {
return this.loader.file.then(
(file) =>
new Promise((resolve, reject) => {
let storage = fileStorage;
uploadBytes(ref(storage, file.name), file)
.then((snapshot) => {
return getDownloadURL(snapshot.ref);
})
.then((downloadURL) => {
resolve({
default: downloadURL,
});
})
.catch((error) => {
reject(error.message);
});
})
);
}
}
const editorConfiguration = {
ui: {
viewportOffset: {
top: 56,
},
},
toolbar: {
items: [
"undo",
"redo",
"|",
"heading",
"fontFamily",
"fontSize",
"fontBackgroundColor",
"fontColor",
"highlight",
"bulletedList",
"numberedList",
"todoList",
"|",
"imageUpload",
"imageInsert",
"insertTable",
"mediaEmbed",
"link",
"pageBreak",
"-",
"outdent",
"indent",
"|",
"blockQuote",
"bold",
"italic",
"underline",
"strikethrough",
"horizontalLine",
],
shouldNotGroupWhenFull: true,
},
language: "en",
image: {
toolbar: [
"imageTextAlternative",
"toggleImageCaption",
"imageStyle:inline",
"imageStyle:block",
"imageStyle:side",
"linkImage",
],
},
table: {
contentToolbar: [
"tableColumn",
"tableRow",
"mergeTableCells",
"tableCellProperties",
"tableProperties",
],
},
};
const Editor = ({ value, onChange }) => {
return (
<>
<CKEditor
editor={EditorCustom}
config={editorConfiguration}
onReady={(editor) => {
editor.plugins.get("FileRepository").createUploadAdapter = (
loader
) => {
return new MyUploadAdapter(loader);
};
}}
data={value}
onChange={(event, editor) => {
const data = editor.getData();
onChange(data);
}}
/>
</>
);
};
export default Editor;
but when i include component in create.js other default inputs delay and ckeditor input delay too, if not use useState ckeditor working fine
import { useEffect, useState } from "react";
import dynamic from "next/dynamic";
import { database } from "../../../firebase/firebase.config";
import { collection, addDoc } from "firebase/firestore";
const CreateBlog = () => {
const Editor = dynamic(() => import("../../dashboard/utils/myEditor"), {
ssr: false,
});
const [title, setTitle] = useState("");
const [subTitle, setSubTitle] = useState("");
const [message, setMessage] = useState("");
const [body, setBody] = useState("");
const databaseRef = collection(database, "blogs");
const addData = () => {
addDoc(databaseRef, {
title: title,
sub_title: subTitle,
message: message,
})
.then(() => {
alert("Data Sent");
// getData();
setTitle("");
setSubTitle("");
setMessage("");
})
.catch((err) => {
console.error(err);
});
};
return (
<>
<div className="w-full px-4">
<div className="w-full p-8 mt-10 bg-white rounded-lg shadow-md lg:w-3/3 md:w-2/2 md:ml-auto md:mt-0">
<h2 className="mb-1 text-lg font-medium text-gray-900 title-font">
Create Post
</h2>
<div className="mb-4 ">
<label htmlFor="titile" className="text-sm leading-7 text-gray-600">
Title
</label>
<input
type="title"
id="title"
name="title"
value={title}
onChange={(event) => setTitle(event.target.value)}
className="w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out bg-white border border-gray-300 rounded outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
/>
</div>
<div className="mb-4">
<label htmlFor="titile" className="text-sm leading-7 text-gray-600">
Sub Title
</label>
<input
type="title"
id="title"
name="title"
value={subTitle}
onChange={(event) => setSubTitle(event.target.value)}
className="w-full px-3 py-1 text-base leading-8 text-gray-700 transition-colors duration-200 ease-in-out bg-white border border-gray-300 rounded outline-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
/>
</div>
<div className="relative mb-4">
<label
htmlFor="message"
className="text-sm leading-7 text-gray-600"
>
Message
</label>
<textarea
id="message"
name="message"
value={message}
onChange={(event) => setMessage(event.target.value)}
className="w-full h-32 px-3 py-1 text-base leading-6 text-gray-700 transition-colors duration-200 ease-in-out bg-white border border-gray-300 rounded outline-none resize-none focus:border-blue-500 focus:ring-2 focus:ring-blue-200"
></textarea>
</div>
<div className="mb-4 ">
<label htmlFor="body" className="text-sm leading-7 text-gray-600">
Body
</label>
<Editor value={body} onChange={(value) => setBody(value)} />
</div>
<button
onClick={addData}
className="px-6 py-2 text-lg text-white bg-blue-500 border-0 rounded focus:outline-none hover:bg-blue-600"
>
Button
</button>
</div>
</div>
</>
);
};
export default CreateBlog;
<Editor value={body} onChange={(value) => setBody(value)} />
used useState but its delay and slow breaking input type
how to use ckeditor with other inputs and value set useState without dealy