How to add TreeView debug plugin

[jannikbuschke]

I'm trying to add the TreeView from the lexical playground to get a debug view into the lexical editor state. using code like this:

import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext"
import { TreeView } from "@lexical/react/LexicalTreeView"
import {
  addComposerChild$,
  addNestedEditorChild$,
  realmPlugin,
} from "@mdxeditor/editor"

function TreeViewPlugin(): JSX.Element {
  const [editor] = useLexicalComposerContext()
  console.log({ editor })
  return (
    <TreeView
      viewClassName="tree-view-output"
      treeTypeButtonClassName="debug-treetype-button"
      timeTravelPanelClassName="debug-timetravel-panel"
      timeTravelButtonClassName="debug-timetravel-button"
      timeTravelPanelSliderClassName="debug-timetravel-panel-slider"
      timeTravelPanelButtonClassName="debug-timetravel-panel-button"
      editor={editor}
    />
  )
}

const treeViewRealmPlugin = realmPlugin({
  init(realm) {
    realm.pubIn({
      [addComposerChild$]: () => <TreeViewPlugin />,
      [addNestedEditorChild$]: () => <TreeViewPlugin />,
    })
  },
})

The treeview is shown, but it does not show the correct internal state while editing content (it just shows one root node and a paragraph underneath). In a normal lexical setup the TreeViewPlugin works as expected.

What am I doing wrong?