How to convert json to HTML for preview

[ashiq-prospero]

editorState

What's wrong with my code, I want to pass json and get html from the hook but I am getting this error Unable to find an active editor state. State helpers or node methods can only be used synchronously during the callback of editor.update(), editor.read(), or editorState.read()
Any helppointing out my mistake would be appriciated. Thank you

import { useEffect, useState, useMemo } from "react";
import { $generateHtmlFromNodes } from "@lexical/html";
import { createEditor } from "lexical";

export function useLexicalToHtml(lexicalJson) {
  const [htmlContent, setHtmlContent] = useState("");

  const editor = useMemo(() => {
    return createEditor({
      namespace: "preview",
      onError: (error) => {
        console.error(error);
      },
    });
  }, []);

  useEffect(() => {
    if (!lexicalJson || Object.keys(lexicalJson).length === 0) {
      setHtmlContent("");
      return;
    }

    try {
      editor.update(() => {
        const editorState = editor.parseEditorState(JSON.stringify({ ...lexicalJson  }));
        editor.setEditorState(editorState);
      });

      // Generate HTML after the editor state has been set
      editor.read(() => {
        const html = $generateHtmlFromNodes(editor, null);
        setHtmlContent(html);
      });
    
    } catch (err) {
      console.error("Error to convert JSON Lexical to HTML:", err);
      setHtmlContent("");
    }
  }, [lexicalJson, editor]);

  return htmlContent;
}
``