diff --git a/src/core/components/highlight-code.jsx b/src/core/components/highlight-code.jsx
index e192cdbbc76..465a0cd6ee8 100644
--- a/src/core/components/highlight-code.jsx
+++ b/src/core/components/highlight-code.jsx
@@ -16,6 +16,9 @@ export default class HighlightCode extends Component {
     canCopy: PropTypes.bool
   }
 
+  #syntaxHighlighter;
+  #pre;
+
   downloadText = () => {
     saveAs(this.props.value, this.props.fileName || "response.txt")
   }
@@ -40,12 +43,12 @@ export default class HighlightCode extends Component {
   }
 
   componentDidMount() {
-    [this.syntaxHighlighter, this.pre]
+    [this.#syntaxHighlighter, this.#pre]
     .map(element => element?.addEventListener("mousewheel", this.preventYScrollingBeyondElement, { passive: false }))
   }
 
   componentWillUnmount() {
-    [this.syntaxHighlighter, this.pre]
+    [this.#syntaxHighlighter, this.#pre]
     .map(element => element?.removeEventListener("mousewheel", this.preventYScrollingBeyondElement))
   }
 
@@ -58,14 +61,14 @@ export default class HighlightCode extends Component {
 
     const codeBlock = get(config, "syntaxHighlight.activated")
       ? <SyntaxHighlighter
-          ref={elem => this.syntaxHighlighter = elem}
+          ref={elem => this.#syntaxHighlighter = elem}
           language={language}
           className={className + " microlight"}
           style={getStyle(get(config, "syntaxHighlight.theme"))}
           >
           {value}
         </SyntaxHighlighter>
-      : <pre ref={elem => this.pre = elem} className={className + " microlight"}>{value}</pre>
+      : <pre ref={elem => this.#pre = elem} className={className + " microlight"}>{value}</pre>
 
     return (
       <div className="highlight-code">