diff --git a/src/core/components/highlight-code.jsx b/src/core/components/highlight-code.jsx
index 982179944e7..f85694086dc 100644
--- a/src/core/components/highlight-code.jsx
+++ b/src/core/components/highlight-code.jsx
@@ -51,12 +51,14 @@ export default class HighlightCode extends Component {
     }
   }
 
-  componentDidMount() {
-    this.#childNodes?.forEach(node => node.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false }))
+  UNSAFE_componentDidMount() {
+    [this.#syntaxHighlighter, this.#pre]
+    .map(element => element?.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false }))
   }
 
-  componentWillUnmount() {
-    this.#childNodes?.forEach(node => node.removeEventListener("mousewheel", this.preventYScrollingBeyondElement))
+  UNSAFE_componentWillUnmount() {
+    [this.#syntaxHighlighter, this.#pre]
+    .map(element => element?.removeEventListener("mousewheel", this.preventYScrollingBeyondElement))
   }
 
   render () {