Getting and changing the text content in Lexical Editor on React

So, I’m using the lexical editor in my react project. My app get the text from a API that transcribe audio and then I need to put on the Lexical editor, but I’m having problem to manipulate the text, I just don’t know how to do.

TextEditor.tsx:


import { useEffect } from "react";

import { LexicalComposer } from "@lexical/react/LexicalComposer";
import { RichTextPlugin } from "@lexical/react/LexicalRichTextPlugin";
import { ContentEditable } from "@lexical/react/LexicalContentEditable";

import { HistoryPlugin } from "@lexical/react/LexicalHistoryPlugin";
import { ListPlugin } from "@lexical/react/LexicalListPlugin";

import { EditorState } from "lexical";
import { LexicalErrorBoundary } from "@lexical/react/LexicalErrorBoundary";
import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
import { HeadingNode } from "@lexical/rich-text";
import { ListNode, ListItemNode } from '@lexical/list';

import { ToolBarPlugin } from "./Toolbar";

interface TextEditorProps {
  value: string;
  readOnly: boolean;
}

const theme = {
  // apenas css | exemplo:
  // heading: {
  //   h1: "classe-do-h1"
  // } // importa arquivo css com os estilos
};


function onError(error: Error): void {
  console.error(error);
}

const MyOnChangePuglin = (props: { onChange: (editorState: EditorState) => void }): null => {
  const [editor] = useLexicalComposerContext();
  const { onChange } = props;
  useEffect(() => {
    return editor.registerUpdateListener(({ editorState }) => {
      onChange(editorState);
    });
  }, [onChange, editor]);
  return null;
};

export function TextEditor({ value, readOnly }: TextEditorProps) {
  const initialConfig = {
    namespace: "MyEditor",
    theme,
    onError,
    nodes: [HeadingNode, ListNode, ListItemNode]
  };

  return (
    <LexicalComposer initialConfig={initialConfig}>
      <ToolBarPlugin />
      <ListPlugin />
      <RichTextPlugin
        contentEditable={
          <ContentEditable
            className={`min-h-[500px] border-[1px] border-[#d4d4d4] p-4 rounded-md shadow-lg bg-[#f8f8f8] overflow-y-auto focus:outline-none ${
              readOnly ? "cursor-not-allowed" : "cursor-text"
            }`}
          />
        }
        ErrorBoundary={LexicalErrorBoundary}
      />
      <MyOnChangePuglin onChange={(editorState) => console.log(editorState._nodeMap)} />
      <HistoryPlugin />
    </LexicalComposer>
  );
}

How I was passing the text to the older TextArea

   <TextEditor value={transcription} readOnly={editorState} />
// transcription has all the text that will come by the API

I was looking at this page, but I could make it work:
https://lexical.dev/docs/concepts/editor-state