Добавление debounce в функцию mobx

Я создаю приложение React, которое отправляет поисковый запрос на сервер по мере ввода пользователя. Я хочу отклонить этот поисковый запрос, но не знаю, как реализовать его в моем существующем коде:

Магазин Mobx:

// function which initiates a fetch request to server
@action searchPlanet = async (event) => {
            this.searchString = event.target.value;
            this.planets = await getPlanets(this.searchString);
        }

Компонент React вызывает searchPlanet:

const Search = observer(({ store }) => {
    const planetList = toJS(store.planets);
    return (
        <div>
            <div className = {style.search_container}>
                <input type = "text" id = "search" onChange = {e => store.searchPlanet(e)} value = {store.searchString} placeholder = "search planet" />
            </div>
        </div>
    )
})

Я не могу использовать функцию debounce непосредственно на onChange, потому что это также задержит повторный рендеринг компонента поиска, поэтому пользователь увидит набранный текст через некоторое время. Но я не могу понять, как реализовать функцию debounce в моем магазине? Я могу сделать что-то вроде:

import _ from lodash

@action searchPlanet = async (event) => {
            this.searchString = event.target.value;
            this.planets = await getPlanets(this.searchString);
        }

debounceSearch = _.debounce(this.searchPlanet, 250);

Проблема в том, что я не могу вызвать debounceSearch напрямую из компонента Search по причине, упомянутой выше. Но я хочу отклонить функцию getPlanets, которая возвращает обещание (я не уверен, может ли функция устранения неполадок Lodash вернуть обещание, возвращаемое обернутой функцией)?