I am making a search engine using an input and a button that I hope will execute the search but when I just enter a letter in the input that sets the search value of useState my useEffect is executed even though search is not found in the useEffect dependency array.

Input:

<div className="flex gap-1">
    <input className="border-1 border-2 border-solid rounded border-slate-300" value={search} onChange={(e) => setSearch(e.target.value)} />
    <button onClick={() => handleSearch()} <FiSearch/></button>
</div>

handleSearch()

const handleSearch = async () => { 
   setLimitPage(10)
   setPage(1)
   await getProducts(limitPage, page, search)
}

my useEffect that is executed without being expected that way as soon as search changes

useEffect (() => {
    // eslint-disable-next-line
    getProducts(limitPage, page, search) 
    setTotalDocs(products.products?.totalDocs)
    setTotalPages(products.products?.totalPages)
    setCurrentPage(products.products?.page)
    setNextPage(products.products?.hasNextPage)
    setPreviousPage(products.products?.hasPrevPage)

    const totalPages = Math.ceil(totalDocs/limitPage)
    const links = []
    for (let i = 1; i <= totalPages; i++) {
        links[i] = i
    }
    setNumbers(links)
}, [products, limitPage, page ])

I don't understand how I can avoid this so that I can use my search function before useEffect is executed