Estoy tratando de usar react-debounce-input, que funciona muy bien como un código independiente, pero parece que no puedo integrarlo con el componente Autocompletar de la interfaz de usuario del material, pase lo que pase.

¿Hay alguna forma de eliminar el rebote de mi entrada de búsqueda sin ella? ¿Puedo usar react-debounce con mi código actual?

el componente de entrada de rebote

 <DebounceInput minLength={2} debounceTimeout={300} type='text' placeholder='enter city' onChange={(e) => onSearch(e.target.value)} />

el código completo:

 import React, { useEffect, useState } from 'react'; import { weatherService } from '../service/weather.service.js'; import { DayList } from '../cmps/DayList'; import Autocomplete from '@mui/material/Autocomplete'; import TextField from '@mui/material/TextField'; export const WeatherPage = () => { const [searchValue, setSearchValue] = useState(null); const [weather, setWeather] = useState([]); const [results, setResults] = useState([]); const onSearch = async (ev) => { const result = await weatherService.getLocationKey(ev); console.log('result:', result); setWeather(result); }; weather.forEach((city) => { city.label = city.LocalizedName; }); const handleChange = (key) => { console.log('key:', key); setSearchValue(key); }; const onSubmitCity = async (searchValue) => { const city = await weatherService.getWeatherResults(searchValue); setResults(city); }; return ( <div> <div className='main-layout'> <div className='weather-page'> <div>WeatherPage</div> <Autocomplete disablePortal id='combo-box-demo' options={weather} clearOnBlur={false} onChange={(event, value) => handleChange(value.Key)} // prints the selected value sx={{ width: 300 }} renderInput={(params) => ( <TextField {...params} label='City' type='text' placeholder='enter city' onChange={(e) => onSearch(e.target.value)} /> )} /> <button onClick={() => onSubmitCity(searchValue)}>Submit</button> <section>Lorem ipsum, dolor sit amet consectetur adipisicing</section> <button>Toggle Degrees</button> <DayList results={results} /> </div> </div> <section className='footer'>Footer</section> </div> ); };

¡Cualquier ayuda apreciada!