[ab3]

Хочу затормозить ввода интпута для поиска,использую lodash.debounce,debounce работает(консоль выводит),но когда доходит до инпута выдает ошибку:
country.js?dc0a:18 Uncaught TypeError: Cannot read property 'elements' of null
at HTMLFormElement.searchInputHandler (country.js?dc0a:18)
at invokeFunc (index.js?8df7:160)
at trailingEdge (index.js?8df7:207)
at timerExpired (index.js?8df7:195)

Если не использовать debounce то все работает отлично,подскажите в чем проблема?Почему пишет null не могу понять

Вот мой код:

import countryListItem from '../templates/counry-list-item.hbs';
import countryList from '../templates/country-list.hbs';
import fetchCountry from '../services/fetch-country.js';
import debounce from 'lodash.debounce';
import { Notyf } from 'notyf';

const notyf = new Notyf();

const refs = {
  counryList: document.querySelector('#country-list'),
  seacrhForm: document.querySelector('#search-form'),
};

// refs.seacrhForm.addEventListener('input', debounce(searchInputHandler, 500));
refs.seacrhForm.addEventListener('input', searchInputHandler);

function searchInputHandler(e) {
  clearListItem();

  console.log('aaa');

  const form = e.currentTarget;
  const input = form.elements.query;
  const inputValue = input.value;

  if (inputValue === '') {
    return;
  } else {
    fetchCountry.query = inputValue;

    fetchCountry
      .fetchCountries()
      .then(data => {
        if (data.length > 10) {
          notyf.error(
            'Too many matches found.Please enter a more specific query!',
          );
        } else if (data.length >= 2 && data.length <= 10) {
          renderCountryList(data);
        } else if (data.length === 1) {
          renderCountryListItems(data);
        } else notyf.error('Nothing found.Please enter a valid request');
      })
      .catch(error => console.log(error));
  }
}

function renderCountryListItems(items) {
  const markup = items.map(item => countryListItem(item)).join('');
  buildCountryList(markup);
}

function renderCountryList(items) {
  const markup = countryList(items);
  buildCountryList(markup);
}

function buildCountryList(item) {
  refs.counryList.insertAdjacentHTML('beforeend', item);
}

function clearListItem() {
  refs.counryList.innerHTML = '';
}