diff --git a/ui/packages/consul-ui/app/modifiers/with-copyable.js b/ui/packages/consul-ui/app/modifiers/with-copyable.js
index 6ffc49187e96..9867607f12e9 100644
--- a/ui/packages/consul-ui/app/modifiers/with-copyable.js
+++ b/ui/packages/consul-ui/app/modifiers/with-copyable.js
@@ -10,6 +10,16 @@ import { runInDebug } from '@ember/debug';
 const typeAssertion = (type, value, withDefault) => {
   return typeof value === type ? value : withDefault;
 };
+
+function cleanup(instance) {
+  if (instance?.source && instance?.hash) {
+    instance.source?.off('success', instance.hash.success)?.off('error', instance.hash.error);
+
+    instance.source?.destroy();
+    instance.hash = null;
+    instance.source = null;
+  }
+}
 export default class WithCopyableModifier extends Modifier {
   @service('clipboard/os') clipboard;
 
@@ -39,23 +49,14 @@ export default class WithCopyableModifier extends Modifier {
     this.hash = hash;
   }
 
-  disconnect() {
-    if (this.source && this.hash) {
-      this.source.off('success', this.hash.success).off('error', this.hash.error);
-
-      this.source.destroy();
-      this.hash = null;
-      this.source = null;
-    }
-  }
-
-  // lifecycle hooks
-  didReceiveArguments() {
+  modify(element, [value], namedArgs) {
+    this.element = element;
     this.disconnect();
-    this.connect(this.args.positional, this.args.named);
+    this.connect(value, namedArgs);
+    registerDestructor(this, cleanup);
   }
 
-  willRemove() {
-    this.disconnect();
+  disconnect() {
+    cleanup.call(this);
   }
 }