Hi I have an input component (named Combobox), currently if I try to write a string inside it keeps querying, I tried to create a debounce hook so it won't query immediately, basically wait for 500ms until it shall run the query, but currently it keeps querying, what am I missing here?

The debounce hook:

import { useEffect, useState } from 'react'

function useDebounce<T>(value: T, delay?: number): T {
    const [debouncedValue, setDebouncedValue] = useState<T>(value)

    useEffect(() => {
        const timer = setTimeout(() => setDebouncedValue(value), delay || 500)

        return () => {
            clearTimeout(timer)
        }
    }, [value, delay])

    return debouncedValue
}

export default useDebounce

The component with the input

export default function TagSelectionInput() {
    const [query, setQuery] = useState('');
    const debouncedValue = useDebounce(query, 500);
    const [filterTags, { data, loading, error }] = useLazyQuery<FilterTagsQuery>(
        filterQuery,
        {
            variables: {
                filter: query,
                offset: 0,
                limit: 20,
            },
        },
    );

    useEffect(() => {
        const fetchTags = async () => {
            if (query.length > 0) {
                const data = await filterTags();
                console.log(data);
            }
        };

        fetchTags();
    }, [data, debouncedValue, filterTags]);

    return (
        <Combobox value={query} onChange={setQuery}>
            <div className="relative">
                <SearchIcon
                    className="pointer-events-none absolute top-3.5 left-4 h-5 w-5 text-gray-400"
                    aria-hidden="true"
                />
                <Combobox.Input
                    className="border border-gray-300 rounded-md shadow-sm h-10 w-full focus:outline-none focus:ring-1 focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm pl-11 pr-4 text-gray-800 placeholder-gray-400"
                    placeholder="Search..."
                    onChange={(event) => setQuery(event.target.value)}
                />
            </div>