diff --git a/.changeset/itchy-fireants-jump.md b/.changeset/itchy-fireants-jump.md
new file mode 100644
index 00000000000..421c101b291
--- /dev/null
+++ b/.changeset/itchy-fireants-jump.md
@@ -0,0 +1,5 @@
+---
+"@chakra-ui/react-use-callback-ref": patch
+---
+
+fix: useCallbackRef now actually works
diff --git a/packages/hooks/use-callback-ref/src/index.ts b/packages/hooks/use-callback-ref/src/index.ts
index e0a7328a449..fded43aabf8 100644
--- a/packages/hooks/use-callback-ref/src/index.ts
+++ b/packages/hooks/use-callback-ref/src/index.ts
@@ -1,15 +1,11 @@
-import { useCallback, useEffect, useRef } from "react"
+import { useCallback, useRef } from "react"
 
 export function useCallbackRef<T extends (...args: any[]) => any>(
   callback: T | undefined,
   deps: React.DependencyList = [],
 ) {
   const callbackRef = useRef(callback)
+  callbackRef.current = callback
 
-  useEffect(() => {
-    callbackRef.current = callback
-  })
-
-  // eslint-disable-next-line react-hooks/exhaustive-deps
-  return useCallback(((...args) => callbackRef.current?.(...args)) as T, deps)
+  return useCallback(((...args) => callbackRef.current?.(...args)) as T, [])
 }