Set data from backend to text editor , then change those Data

Question

import draftToHtml from "draftjs-to-html";
import { Editor } from "react-draft-wysiwyg";
import { EditorState, convertFromRaw, convertToRaw } from "draft-js";

const Sampleform=()=>{
   const { ContextData } = useContext(SomeContext);
  const [data, setData] = useState(EditorState.createEmpty());

  const[loading,setLoading]=useState(false);

  const [details, setDetails] = useState({
    body:data,
    date: null,
    dataNew: true,
  });

 useEffect(() => {
  setLoading(true);

  (async () => {
    if (details) {
      setDetails(
       details
      )
    }else{
      try{
        setDetails({...details,
          body: //body deatils whick comes from backend
        });
        setDetails(details);
      }catch(error){
        console.log(error);
      }
    }
  })
  }, [])

  useEffect(() => {
    setLoading(true);
    if (details && details.dataNew) {
      try {
        getNewDetails();
      } catch (error) {
        console.log(error);
      }
    }
  }, [ContextData]);

const getNewDetails =()=>{
  //func working
}

return(
        <Formik
            enableReinitialize={true}
            initialValues={letterBody}
            validationSchema={validationSchema}
            onSubmit={(letterBody, { setSubmitting }) => {
              details.body = draftToHtml(letter.getCurrentContent());
            }}
          >
            {({
              values,
              handleBlur,
              handleChange,
              setFieldValue,
              handleSubmit,
              isSubmitting,
              errors,
              touched,
            }) => (
              <Form>
{/* data input here its works fine */}
                  <div>
                    <Editor
                      editorState={data}
                      wrapperClassName="demo-wrapper"
                      editorClassName="demo-editor"
                      onEditorStateChange={(data) => setData(data)}
                      value={data}
                      onblur={handleBlur}
                      toolbar={{
                        options: ["inline", "list", "link", "remove"],
                        inline: {
                          options: ["bold", "italic", "underline"],
                          bold: { className: "bordered-option-classname" },
                          italic: { className: "bordered-option-classname" },
                          underline: { className: "bordered-option-classname" },
                        },
                      }}
                      spellCheck={true}
                    />
                  </div>     
              </Form>
            )}
      </Formik>
  );
};


export default Sampleform;

**want to sent data to my text editor which comes from backend API, then change those data from a text editor, in here date component work well but text editor didn't make any sense, How to fix this Iam using "react-draft-WYSIWYG" text editor with formik **

I have provided a code sample above what is the best way to do the above task, with react useEffect and "react-draft-WYSIWYG" with formik , text editor value does not change my state