Tip Tap setContent function isnt working in Next-Ts

Question

Trying to create a PWA note app and using tiptap in it. I'm trying to save content in localStorage to be able to run the app in offline mode and save content in the database whenever the user is back online.

The content is stored successfully in localStorage but whenever the user refreshes the page I can't update the content of the tiptap editor with stored data in storage.

Here is the code of my tiptap component:

  const editor = useEditor({
    extensions: [Document, Paragraph, Text, TextStyle, Color],
    content: ``,
    editorProps: {
      attributes: {
        class:
          " editor prose prose-sm sm:prose lg:prose-lg xl:prose-2xl mx-auto focus:outline-none",
      },
    },
  })!;

  

  const json = editor?.getHTML()!;

  // useEffect(() => {
  //   const Notes = JSON.parse(localStorage.getItem("NOTES")!) as Note[];
  //   const Markdown = Notes?.find(
  //     (note) => note.id == Id || note.id == id
  //   )!.text;
  //   console.log(Markdown);
  //   setTimeout(() => {
  //     !editor?.isDestroyed &&
  //       editor?.commands?.setContent(
  //         `<p><span style="color: #ffffff">aaaaa</span></p>`
  //       );
  //   }, 1000);
  // }, []);

  useEffect(() => {
    const Notes = JSON.parse(localStorage.getItem("NOTES")!) as Note[];
    const Markdown = Notes?.find(
      (note) => note.id == Id || note.id == id
    )!.text;
    console.log("markdown", Markdown);
    editor?.commands?.setContent(Markdown)
    console.log(editor?.getHTML())
  }, []);

  // useEffect(() => {
  //   const Notes = JSON.parse(localStorage.getItem("NOTES")!) as Note[];
  //   const Markdown = Notes?.find(
  //     (note) => note.id == Id || note.id == id
  //   )!.text;
  //   // if (json?.length > 7) {
  //   //   setmarkdown(json);
  //   // } else {
  //   //   setmarkdown(Markdown);
  //   // }
  // }, [json]);

  useEffect(() => {
    saveContent(id, Id);
  }, [json, Id, id]);

well in this part of code ive tried to log stored value and value of editor and editor returns undefined for value.

 useEffect(() => {
    const Notes = JSON.parse(localStorage.getItem("NOTES")!) as Note[];
    const Markdown = Notes?.find(
      (note) => note.id == Id || note.id == id
    )!.text;
    console.log("markdown", Markdown);
    editor?.commands?.setContent(Markdown)
    console.log(editor?.getHTML())
  }, []);

I even tried to useState and useCallback to force update the content of the editor but some TS issues blew up which just makes me more confused.

Can anybody help me with this setContent function?