diff --git a/packages/design-system/packages/hooks/src/use-debounce/useDebounce.ts b/packages/design-system/packages/hooks/src/use-debounce/useDebounce.ts
index 4754ac07..c4af6be0 100644
--- a/packages/design-system/packages/hooks/src/use-debounce/useDebounce.ts
+++ b/packages/design-system/packages/hooks/src/use-debounce/useDebounce.ts
@@ -1,14 +1,12 @@
 import React from 'react'
+import { useTimeout } from '../use-timeout'
 
 export default function useDebounce<T>(value: T, delay: number) {
+  const { start } = useTimeout()
   const [debouncedValue, setDebouncedValue] = React.useState<T>(value)
 
   React.useEffect(() => {
-    const timeoutId = setTimeout(() => setDebouncedValue(value), delay)
-
-    return () => {
-      clearTimeout(timeoutId)
-    }
+    start(() => setDebouncedValue(value), delay)
   }, [value, delay])
 
   return debouncedValue