diff --git a/package-lock.json b/package-lock.json
index 8a7ee9a7593..a27fafd028d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -78770,7 +78770,6 @@
         "font-awesome": "^4.7.0",
         "hadron-app": "^4.22.0",
         "hadron-app-registry": "^8.11.0",
-        "hadron-document": "^7.10.0",
         "hadron-react-buttons": "^5.8.0",
         "hadron-react-components": "^5.14.0",
         "html-webpack-plugin": "^3.2.0",
@@ -123665,7 +123664,6 @@
         "font-awesome": "^4.7.0",
         "hadron-app": "^4.22.0",
         "hadron-app-registry": "^8.11.0",
-        "hadron-document": "^7.10.0",
         "hadron-react-buttons": "^5.8.0",
         "hadron-react-components": "^5.14.0",
         "html-webpack-plugin": "^3.2.0",
diff --git a/packages/compass-aggregations/src/components/input-preview/input-preview.jsx b/packages/compass-aggregations/src/components/input-preview/input-preview.jsx
index cfb98b59928..087239770bc 100644
--- a/packages/compass-aggregations/src/components/input-preview/input-preview.jsx
+++ b/packages/compass-aggregations/src/components/input-preview/input-preview.jsx
@@ -1,7 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Document } from '@mongodb-js/compass-crud';
-import HadronDocument from 'hadron-document';
 import LoadingOverlay from '../loading-overlay';
 
 import styles from './input-preview.module.less';
@@ -26,7 +25,7 @@ class InputPreview extends Component {
     const documents = (this.props.documents || []).map((doc, i) => {
       return (
         <div key={i} className={styles['input-preview-document-card']}>
-          <Document doc={new HadronDocument(doc)} editable={false}  />
+          <Document doc={doc} editable={false}  />
         </div>
       );
     });
diff --git a/packages/compass-aggregations/src/components/stage-preview/stage-preview.jsx b/packages/compass-aggregations/src/components/stage-preview/stage-preview.jsx
index 361c33d5777..abda00062b3 100644
--- a/packages/compass-aggregations/src/components/stage-preview/stage-preview.jsx
+++ b/packages/compass-aggregations/src/components/stage-preview/stage-preview.jsx
@@ -3,7 +3,6 @@ import React, { Component } from 'react';
 import PropTypes from 'prop-types';
 import { Document } from '@mongodb-js/compass-crud';
 import { TextButton } from 'hadron-react-buttons';
-import HadronDocument from 'hadron-document';
 import LoadingOverlay from '../loading-overlay';
 import { OUT, MERGE } from '../../modules/pipeline';
 import decomment from 'decomment';
@@ -211,10 +210,7 @@ class StagePreview extends Component {
         const documents = this.props.documents.map((doc, i) => {
           return (
             <div key={i} className={styles['stage-preview-document-card']}>
-              <Document
-                doc={new HadronDocument(doc)}
-                editable={false}
-              />
+              <Document doc={doc} editable={false} />
             </div>
           );
         });
diff --git a/packages/compass-crud/src/components/document.jsx b/packages/compass-crud/src/components/document.jsx
index 61f67273c26..c48455eca2f 100644
--- a/packages/compass-crud/src/components/document.jsx
+++ b/packages/compass-crud/src/components/document.jsx
@@ -1,40 +1,41 @@
-import React from 'react';
+import React, { useMemo } from 'react';
 import PropTypes from 'prop-types';
+import HadronDocument from 'hadron-document';
 import EditableDocument from './editable-document';
 import ReadonlyDocument from './readonly-document';
 
-/**
- * Component for a single document in a list of documents.
- */
-class Document extends React.Component {
-  /**
-   * Render a single document list item.
-   *
-   * @returns {React.Component} The component.
-   */
-  render() {
-    if (this.props.editable && this.props.isTimeSeries) {
-      return (
-        <ReadonlyDocument
-          doc={this.props.doc}
-          copyToClipboard={this.props.copyToClipboard}
-          openInsertDocumentDialog={this.props.openInsertDocumentDialog}
-        />
-      );
-    }
-    if (this.props.editable) {
-      return (<EditableDocument {...this.props} />);
+const Document = (props) => {
+  const {
+    editable,
+    isTimeSeries,
+    copyToClipboard,
+    openInsertDocumentDialog,
+    doc: _doc,
+  } = props;
+
+  const doc = useMemo(() => {
+    if (_doc?.isRoot?.()) {
+      return _doc;
     }
+    return new HadronDocument(_doc);
+  }, [_doc]);
+
+  if (editable && isTimeSeries) {
     return (
       <ReadonlyDocument
-        doc={this.props.doc}
-        copyToClipboard={this.props.copyToClipboard}
+        doc={doc}
+        copyToClipboard={copyToClipboard}
+        openInsertDocumentDialog={openInsertDocumentDialog}
       />
     );
   }
-}
 
-Document.displayName = 'Document';
+  if (editable) {
+    return <EditableDocument {...props} doc={doc} />;
+  }
+
+  return <ReadonlyDocument doc={doc} copyToClipboard={copyToClipboard} />;
+};
 
 Document.propTypes = {
   doc: PropTypes.object.isRequired,
diff --git a/packages/compass-schema-validation/package.json b/packages/compass-schema-validation/package.json
index 774e98599f9..70562a23735 100644
--- a/packages/compass-schema-validation/package.json
+++ b/packages/compass-schema-validation/package.json
@@ -82,7 +82,6 @@
     "font-awesome": "^4.7.0",
     "hadron-app": "^4.22.0",
     "hadron-app-registry": "^8.11.0",
-    "hadron-document": "^7.10.0",
     "hadron-react-buttons": "^5.8.0",
     "hadron-react-components": "^5.14.0",
     "html-webpack-plugin": "^3.2.0",
diff --git a/packages/compass-schema-validation/src/components/document-preview/document-preview.jsx b/packages/compass-schema-validation/src/components/document-preview/document-preview.jsx
index 3ace355a72a..a64b809a1fc 100644
--- a/packages/compass-schema-validation/src/components/document-preview/document-preview.jsx
+++ b/packages/compass-schema-validation/src/components/document-preview/document-preview.jsx
@@ -1,8 +1,6 @@
 import React, { Component } from 'react';
 import PropTypes from 'prop-types';
-import classnames from 'classnames';
 import { Document } from '@mongodb-js/compass-crud';
-import HadronDocument from 'hadron-document';
 
 import styles from './document-preview.module.less';
 
@@ -37,7 +35,7 @@ class DocumentPreview extends Component {
         <div className={styles['document-preview-documents']}>
           <div className={styles['document-preview-document-card']}>
             <Document
-              doc={new HadronDocument(this.props.document)}
+              doc={this.props.document}
               editable={false}
             />
           </div>