I am using Blocknote editor , when I am visiting the route the editor is mounted before its content is fetched and its initial content is set
how can I fix this ?

const TextEditor: React.FC = () => {
  const [editable, setEditable] = useState<boolean>(false);
  const [initialdata, setInitialdata] = useState<PartialBlock[] | []>([]);
  


  useEffect(() => {
    // Retrieve the existing data from database storage.
    const fetchFromDatabase = async () => {
      try {
        const storedContent = await axios.get(`/api/journal?date=${date}`);
        console.log(storedContent.data.journal.content);
        const parsedData = JSON.parse(
          storedContent.data.journal.content
        ) as PartialBlock[];
        setInitialdata(parsedData);
      } catch (error) {
        console.error("Error fetching data:", error);
      }
    };

    fetchFromDatabase();
    if (date === new Date().toDateString()) {
      setEditable(true);
    }
  }, [date]);

  const schema = BlockNoteSchema.create({
    blockSpecs: {
      ...defaultBlockSpecs,
      audio: undefined as any,
      file: undefined as any,
      video: undefined as any,
    },
  });
  const editor: BlockNoteEditor = useCreateBlockNote({
    schema,
    uploadFile,
    initialContent:
      initialdata.length > 0
        ? initialdata
        : [{ type: "paragraph", content: "" }],
  });


  // Update the editor once initialdata is set
  
  
  return (
    <div className="rounded-xl border py-5 px-5 m-auto min-h-screen bg-white">
      <BlockNoteView
        editor={editor}
        theme="light"
        editable={editable}
        className="-ml-5 py-5"
      />
    </div>
  );
};

export default TextEditor;