i'm trying to use react-debounce-input ,which works great as a stand-alone piece of code but i just can't seem to integrate it with material UI Autocomplete component no matter what.

is there a way of debouncing my search input without it? can i use react-debounce with my current code?

the debounceinput component

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

the entire code :

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>
  );
};

Any help appreciated!