diff --git a/chrome/content/zotero/components/annotation.jsx b/chrome/content/zotero/components/annotation.jsx
index 4b56b84089..6037551dc2 100644
--- a/chrome/content/zotero/components/annotation.jsx
+++ b/chrome/content/zotero/components/annotation.jsx
@@ -64,11 +64,6 @@ function AnnotationBox({ data }) {
 
 Zotero.AnnotationBox = memo(AnnotationBox);
 
-Zotero.AnnotationBox.render = (domEl, props) => {
-	Zotero.AnnotationBox.root = ReactDOM.createRoot(domEl);
-	Zotero.AnnotationBox.root.render(<AnnotationBox { ...props } />);
-};
-
-Zotero.AnnotationBox.destroy = () => {
-	Zotero.AnnotationBox.root.unmount();
+Zotero.AnnotationBox.render = (root, props) => {
+	root.render(<AnnotationBox { ...props } />);
 };
diff --git a/chrome/content/zotero/components/createParent/createParent.jsx b/chrome/content/zotero/components/createParent/createParent.jsx
index c4847353f0..34460a406c 100644
--- a/chrome/content/zotero/components/createParent/createParent.jsx
+++ b/chrome/content/zotero/components/createParent/createParent.jsx
@@ -26,7 +26,6 @@
 'use strict';
 
 import React, { memo, useEffect } from 'react';
-import ReactDOM from "react-dom";
 import PropTypes from 'prop-types';
 import cx from 'classnames';
 
@@ -81,12 +80,6 @@ CreateParent.propTypes = {
 Zotero.CreateParent = memo(CreateParent);
 
 
-Zotero.CreateParent.destroy = () => {
-	Zotero.CreateParent.root.unmount();
-};
-
-
-Zotero.CreateParent.render = (domEl, props) => {
-	Zotero.CreateParent.root = ReactDOM.createRoot(domEl);
-	Zotero.CreateParent.root.render(<CreateParent { ...props } />);
+Zotero.CreateParent.render = (root, props) => {
+	root.render(<CreateParent { ...props } />);
 };
diff --git a/chrome/content/zotero/createParentDialog.js b/chrome/content/zotero/createParentDialog.js
index 37321ba4c4..9fe0f99ff5 100644
--- a/chrome/content/zotero/createParentDialog.js
+++ b/chrome/content/zotero/createParentDialog.js
@@ -25,8 +25,11 @@
 
 "use strict";
 
+import ReactDOM from "react-dom";
+
 var io;
 let createParent;
+let root;
 
 function toggleAccept(enabled) {
 	document.querySelector('dialog').getButton("accept").disabled = !enabled;
@@ -40,7 +43,8 @@ function doLoad() {
 	io = window.arguments[0];
 
 	createParent = document.getElementById('create-parent');
-	Zotero.CreateParent.render(createParent, {
+	root = ReactDOM.createRoot(createParent);
+	Zotero.CreateParent.render(root, {
 		loading: false,
 		item: io.dataIn.item,
 		toggleAccept
@@ -54,7 +58,7 @@ function doLoad() {
 }
 
 function doUnload() {
-	Zotero.CreateParent.destroy(createParent);
+	root.unmount();
 }
 
 async function doAccept() {
@@ -65,7 +69,7 @@ async function doAccept() {
 		childItem,
 		(on) => {
 			// Render react again with correct loading value
-			Zotero.CreateParent.render(createParent, {
+			Zotero.CreateParent.render(root, {
 				loading: on,
 				item: childItem,
 				toggleAccept
diff --git a/chrome/content/zotero/elements/mergeGroup.js b/chrome/content/zotero/elements/mergeGroup.js
index e1a351077d..7e1e7c07cf 100644
--- a/chrome/content/zotero/elements/mergeGroup.js
+++ b/chrome/content/zotero/elements/mergeGroup.js
@@ -23,6 +23,8 @@
     ***** END LICENSE BLOCK *****
 */
 
+import ReactDOM from "react-dom";
+
 {
 	class MergeGroup extends XULElement {
 		constructor() {
@@ -292,6 +294,12 @@
 			}
 		}
 		
+		disconnectedCallback() {
+			if (this._objboxRoot) {
+				this._objboxRoot.unmount();
+			}
+		}
+		
 		get type() {
 			return this.parent.type;
 		}
@@ -448,7 +456,8 @@
 			if (item.isAnnotation()) {
 				Zotero.Annotations.toJSON(item)
 				.then((data) => {
-					Zotero.AnnotationBox.render(objbox, { data });
+					this._objboxRoot = ReactDOM.createRoot(objbox);
+					Zotero.AnnotationBox.render(this._objboxRoot, { data });
 				});
 			}
 			else {