Editor render issue with data props

I am waiting when I will get response with some structure and I need to pass it to Editor.

( I also see such error in console: `Block «paragraph» skipped because saved data is invalid` )

so on initial render editor triggers `onChange` method with empty data `{time: 1697134792817, blocks: Array(0), version: '2.28.0'}` ( I tested it using setTimeout )

and it overrides data I save in useState. That's why I see empty editor.

Full code :

```
import React from "react";
import { Button, styled, TextField } from "@mui/material";
import { PolicyCybertaskContext } from "..";
import { Column, Row } from "components/containers";
import Widget from "components/widget";
import { CopyAll } from "@mui/icons-material";
import {
UpdatePolicySectionDtoInput,
useUpdatePolicySectionMutation,
} from "lib/apollo/types";
import dynamic from "next/dynamic";
import { editorDataTransform } from "lib/utils/editorDataTransform";

interface Props {
onPrev: () => void;
onNext: () => void;
section: number;
item: number;
}

const Editor = dynamic(() => import("components/Editor"), {
ssr: false,
});

const PolicySections: React.FC = ({ onPrev, onNext, section, item }) => {
const { template, policy } = React.useContext(PolicyCybertaskContext);
const [error, setError] = React.useState();
const [answer, setAnswer] = React.useState({});
const [updateSection] = useUpdatePolicySectionMutation();

React.useEffect(() => {
if (!policy || !policy.policySections[section]) {
setAnswer({});
return;
}
const currentItem = policy.policySections[section].items[item];
if (!currentItem) {
setAnswer({});
} else {
setAnswer(editorDataTransform(currentItem));
}
}, [section, item, policy]);

const save = () => {
setError(undefined);
if (!policy?.policySections[section]) return;

const dto: UpdatePolicySectionDtoInput = {
id: policy.policySections[section].id,
items: policy.policySections[section].items[item]
? policy.policySections[section].items.map((a, index) => {
if (index === item) {
return JSON.stringify(answer);
}
return a;
})
: [...policy.policySections[section].items, JSON.stringify(answer)],
};

updateSection({ variables: { dto } });
};

const saveAndGoBack = () => {
if (answer.length === 0) {
setError("This field is required.");
return;
}
save();
onPrev();
};

const saveAndContinue = () => {
if (answer.blocks.length === 0) {
setError("This field is required.");
return;
}
save();
onNext();
};

const handleChange = (e: React.ChangeEvent) => {
setError(undefined);
setAnswer(e.target.value);
};

const copyExample = () => {
if (
template?.templatePolicy.templatePolicySections[section]
.templatePolicySectionItems[item].exampleAnswer
)
setAnswer(
template?.templatePolicy.templatePolicySections[section]
.templatePolicySectionItems[item].exampleAnswer
);
};

console.log(policy?.policySections)
console.log(item)
console.log(answer)

return (


{
template?.templatePolicy.templatePolicySections[section]
.templatePolicySectionItems[item].question
}

Example answer

{template?.templatePolicy.templatePolicySections[
section
].templatePolicySectionItems[item].exampleAnswer
.split("\n")
.map((line, i) => (

{line}

))}

Your answer

{JSON.stringify(answer)}

{
console.log('data', data)
setAnswer(data)
// if(data.blocks.length !== 0){
// setTimeout(()=> {setAnswer(data)},3000)
// }
}} editorblock={`editorjs-container-${section}`}/>



);
};

```