Debounced search input

function SearchBox({ onSearch }: { onSearch: (q: string) => void }) {
    const [value, setValue] = useState('')
    const debounced = useDebounce(value, 250)

    useEffect(() => {
        onSearch(debounced)
    }, [debounced, onSearch])

    return (
        <input
            value={value}
            onChange={(e) => setValue(e.target.value)}
            placeholder="Search..."
        />
    )
}