tiptap ReactNodeViewRenderer how to render the original view

I'm using tiptap and trying to extend the Paragraph node to wrap some extra stuff around its view. I used <NodeViewWrapper> and <NodeViewContent> as the guides said.

const ParagraphWrapper = () => {
  return (
    <NodeViewWrapper>
      <NodeViewContent />
    </NodeViewWrapper>
  )
}

const ParagraphExt = Paragraph.extend({
  addNodeView() {
    return ReactNodeViewRenderer(ParagraphWrapper)
  }
})

export default function App() {
  const editor = useEditor({
    extensions: [
      Document,
      Text,
      ParagraphExt,  // <<<< text-align was not rendered
      // Paragraph,   // <<<< This worked
      TextAlign.configure({
        types: ["paragraph"]
      }),
    ],
    content: `<p style="text-align: center">This is a paragraph</p>`,
  })

  return (
    <>
      <EditorContent editor={editor} />
     <pre>{JSON.stringify(editor?.getJSON?.(), null, 2)}</pre>
    </>
  );
}

However, this seems to render the node from scratch. Thus, other extensions, such as textAlign no longer works.

I only need to wrap a thin layer around whatever was rendered originally. How do I do that?

Code Sandbox