I am using lexical and want to set initial text for the editor.

For now, I am just trying to hardcode the initial text. Turns out I can't just pass a String.

It needs to be in JSON format.

Thus I am passing in the following instead.

'{"text":"sample text"}'

But it throws following error:

TypeError: Cannot read properties of undefined (reading 'type')

What am I doing wrong?

function Placeholder() {
  return <div className="editor-placeholder">Enter some rich text...</div>;
}

const editorConfig = {

  // This is how I am trying to set initial value.
  // no errors if I remove this. I need this cos I need to set initial value.
  editorState: '{"text":"sample text"}',

  // other params
};

export default function Editor() {

  return (
    <LexicalComposer initialConfig={editorConfig}>
      <div className="editor-container">
        <ToolbarPlugin />
        <div className="editor-inner">
          <RichTextPlugin
            contentEditable={<ContentEditable className="editor-input" />}
            placeholder={<Placeholder />}
          />
          {/* other login components */}
        </div>
      </div>
    </LexicalComposer>
  );
}