Реализуйте компонент для задержки обработки кликов, то есть debounce.

Для trailing debounce каждый клик сбрасывает таймер, а действие выполняется один раз после паузы; при размонтировании таймер очищается.

Пример кнопки на React, callback вызывается без аргументов:

function DebouncedButton({ onAction, delay = 300, children }) {
  const timer = useRef(null);
  useEffect(() => () => clearTimeout(timer.current), [onAction, delay]);
  function handleClick() {
    clearTimeout(timer.current);
    timer.current = setTimeout(onAction, delay);
  }
  return <button type="button" onClick={handleClick}>{children}</button>;
}

useRef/useEffect импортируют из React. При смене callback или delay ожидающий вызов отменяется. Debounce не равен защите от повторной отправки уже выполняющегося запроса — для неё нужно отдельное состояние.