I am developing an email template creator and editor app. I am using lexical for the text editor engine. Now I implemented to load the content from the database and the loading works fine but if I start writing into the loaded content it makes a new line from the begining and takes the cursor on the left side of the first character on every keypress. So if the content data is Dear User and I want to write hey after dear user the text editor content will look like this y e h Dear user

This is the TemplateWrapper component. The problem might lie in the useEffect

function LexicalEditorWrapper({
  content,
  setContent,
}: {
  content: string;
  setContent: (content: string) => void;
}) {
  const [editor] = useLexicalComposerContext();
  useEffect(() => {
    if (content) {
      editor.update(() => {
        const parser = new DOMParser();
        const dom = parser.parseFromString(content, "text/html");
        const nodes = $generateNodesFromDOM(editor, dom);
        const root = $getRoot();
        root.clear(); // Clear existing content
        root.append(...nodes); // Append new content
      });
    }
  }, [content, editor]);

  return (
    <>
      <Divider />
      <Toolbar />
      <Box sx={{ position: "relative", background: "white" }}>
        <RichTextPlugin
          contentEditable={<MuiContentEditable />}
          placeholder={<Box sx={placeHolderSx}>Enter some text...</Box>}
          ErrorBoundary={LexicalErrorBoundary}
        />

        {/* Capture editor state changes and update setContent */}
        <OnChangePlugin
          onChange={(editorState) => {
            editorState.read(() => {
              const root = $getRoot();
              const serializedContent = $generateHtmlFromNodes(editor, null);
              setContent(JSON.stringify(serializedContent)); // Update state in parent component with serialized content
            });
          }}
        />

        <HistoryPlugin />
        <ListPlugin />
        <LinkPlugin />
        {/* <ImagesPlugin captionsEnabled={false} /> */}
        {/* <FloatingTextFormatToolbarPlugin /> */}
      </Box>
    </>
  );
}

I have tried to set content differently but I just cennot find the soulution. Lexical documentation also did not help.