How do I update value in React?

[lkdm]

Does anyone know how to update the markdown in the React version of the Editor? I'm sure it's something simple, but I was unable to find the answer online or by searching through the docs.

import React, { useCallback, useEffect, useState } from 'react';
import { defaultValueCtx, Editor, rootCtx } from '@milkdown/kit/core';
import { nord } from '@milkdown/theme-nord';
import { Milkdown, MilkdownProvider, useEditor } from '@milkdown/react';
import { listener, listenerCtx } from "@milkdown/plugin-listener";
import { history } from '@milkdown/plugin-history';
import { clipboard } from '@milkdown/kit/plugin/clipboard';
import { indent } from '@milkdown/kit/plugin/indent';
import { commonmark } from '@milkdown/kit/preset/commonmark';

interface EditorProps {
  defaultContent: string;
  setContent: (content: string) => void;
  eventTimestamp?: number; // When this changes, milkdown editor should re-render/update.
}

const MilkdownEditor = ({defaultContent, setContent, eventTimestamp}: EditorProps) => {
    const { get } = useEditor((root) =>
      Editor.make()
        .config(nord)
        .config((ctx) => {
          ctx.set(rootCtx, root)
          ctx.set(defaultValueCtx, defaultContent)
          ctx
            .get(listenerCtx)
            .updated((ctx, doc, prevDoc) => {
              console.log("updated", doc, prevDoc);
            })
            .markdownUpdated((ctx, markdown, prevMarkdown) => {
                console.log(
                  "markdownUpdated to=",
                  markdown,
                  "\nprev=",
                  prevMarkdown
                );
                setContent(markdown);
              })
            .destroy(() => console.log("Destroyed"))
        })
        .use(commonmark)
        .use(history)
        .use(clipboard)
        .use(indent)
        .use(listener)

  );

    useEffect(() => {
      console.log("Milkdown re-rend")
    }, [])

  return <Milkdown />;
};

const MilkdownEditorWrapper = (props: EditorProps) => {
  return (
    <MilkdownProvider>
      <MilkdownEditor { ...props } />
    </MilkdownProvider>
  );
};

export default MilkdownEditorWrapper

[lkdm]

This took me hours to find the answer for, but the solution is to add a dependency array at the end of the useEditor hook;

useEditor((root) => Editor.make(), [eventTimestamp])