How to end and execute debounce? reactjs

Question

I have a working code that delays the input of search using lodash's debounce. But I don't know how to end and execute it in another function.

Logic is if I type in the search bar, it should wait for 5sec before it change. But If I click add name button it should end the waiting/debounce and change it directly.

I have been to this link but I don't how to apply it in my scenario How to cancel a debounced function after it is called and before it executes? . Somebody knows how to do it? thanks

---

Here's my working code:

const debounce = _.debounce;

const onChangeName = debounce((query, id) => {
    names[id] = query.target.value;
    setNames(names);
}, 5000);

const onAddName = () => {
    // <=== I want here to end the debounce, and automatically execute changing of name
    setNames(names.concat(['']));
};