Как реализовать условную логику показать/скрыть автоподсказки в Реакте?

Стейты

// Использую, чтобы показать/скрыть подсказки
const [isAutoComplete, setIsAutoCompelte] = useState(false);
// Массив подсказок, который приходит с сервера
const [suggestions, setSuggestions] = useState([]);

На событии onChange в инпуте:

   if (inputValue.length >= 3) {
      // Длина запроса > 3, делаю запрос за подсказками
      const { suggestions } = await getAddressSuggestion(inputValue);

      // Показываю блок с подсказками
      setIsAutoCompelte(true);

      setSuggestions(suggestions);
    } 
  }

Рендерю подсказки

  {
  isAutoComplete 
  && (
    <Suggestions suggestions={suggestions} onSuggestionClick={onSuggestionClick} />
  )}

Функция, которая берет подсказку по которой был клик и записывает в стейты

  function onSuggestionClick(suggestion) {
    setAddressInput(suggestion.value);
    setAddress(suggestion);
    addressValidation(suggestion, setAddressErorrs);
  }

Все работает нормально при сценарии: клик на ипнут, ввели текст, кликнули по подсказке. Проблема начинается если ввели текст в инпут и кликнули вне блока подсказок — блок не исчезает, а остается. Единственная возможность его скрыть удалить текст из инпута или кликнуть на подсказке.

Пробовал решить проблему через событие onBlur на инпуте:

  <input
    className={styles.input}
    placeholder='Адрес'
    onChange={handleAdressChange}
    value={addressInput}
    required
    onBlur={() => setIsAutoCompelte(false)}
  />

Тогда перестает работать клик на подсказке. Если кликаю по подсказке, то в стейты не записывается адрес. Я думаю, потому что событие onBlur срабатывает быстрее, чем функция onSuggestionClick(suggestion). Как можно решить роблему?