Facing an issue with debouncing In React

Question

In my project, I want to use debounce method but this code is not working properly. It prints the input value continuously after a delay. I just want to print the input value when the user's typing is over.

const [searchItem, setSearchItem] = useState('');

const getData = () => console.log(searchItem);

const handleSearch = (fn, delay) => {
    let timer;
    return () => {
        clearTimeout(timer);

        timer = setTimeout(() => {
            fn();
        }, delay)
    }
}

const search = handleSearch(getData, 1000)

return (
    <section className="container">
        <h2 className="main__title">Search Name</h2>
        <input type="text" onKeyUp={search} value={searchItem} onChange={e => setSearchItem(e.target.value.toLowerCase().trim())} placeholder="Seach Name" className="search__input" />
    </section>
);

I just want to print the name in the console when the user's typing is over or after 1s delay.