diff --git a/src/utils/hooks/useValueRef.ts b/src/utils/hooks/useValueRef.ts
index dc2d0a8be072..3ef2cd6be63b 100644
--- a/src/utils/hooks/useValueRef.ts
+++ b/src/utils/hooks/useValueRef.ts
@@ -3,6 +3,9 @@ import { useState, useEffect } from 'react'
 
 export function useValueRef<T>(ref: ValueRef<T>) {
     const [value, setValue] = useState<T>(ref.value)
-    useEffect(() => ref.addListener(newValue => setValue(newValue)), [ref])
+    useEffect(() => {
+        if (value !== ref.value) setValue(ref.value)
+        return ref.addListener(v => setValue(v))
+    }, [ref, value])
     return value
 }