How to use the debounce.debounce function in debounce

const defaultQueryVal = useQueryParam(SEARCH_VALUE_QUERY_PARAM_KEY) as string; // search query to start with

  /**
   * Track the current value in the search box.
   */
  const [searchVal, setSearchVal] = useState(defaultQueryVal || "");
  const searchOnChange = useCallback(
    // TODO: debounce this
    (e: React.ChangeEvent) => {
      setSearchVal(e.target.value);
    },
    []
  );

  // track debounce with ref (see https://overreacted.io/making-setinterval-declarative-with-react-hooks/)
  const debouncedLastSearchUpdater = useRef(debounce(onNewSearchVal, 1500));
  useEffect(() => {
    if (searchVal) {
      debouncedLastSearchUpdater.current(searchVal);
    }
  }, [searchVal]);

  return (
     onNewSearchVal(searchVal)}
      {...rest}
    />
  );
};

webViewPanel.webview,
    output,
    gist,
    scripts,
    styles
  );

  if ((await config.get("playground.showConsole")) || manifest.showConsole) {
    output.show(false);
  }

  const autoRun = await config.get("playground.autoRun");
  const runOnEdit = autoRun === "onEdit";

  const documentChangeDisposable = vscode.workspace.onDidChangeTextDocument(
    debounce(async ({ document }) => {
      if (isPlaygroundDocument(gist, document, MARKUP_EXTENSIONS)) {
        const content = getMarkupContent(document);

        if (content !== null) {
          htmlView.updateHTML(content, runOnEdit);
        }
      } else if (isPlaygroundDocument(gist, document, SCRIPT_EXTENSIONS)) {
        // If the user renamed the script file (e.g. from *.js to *.jsx)
        // than we need to update the manifest in case new scripts
        // need to be injected into the webview (e.g. "react").
        if (
          jsEditor &&
          jsEditor.document.uri.toString() !== document.uri.toString()
        ) {
          // TODO: Clean up this logic
          const oldFile =

componentDidMount() {
    this.boundScroll = debounce(this.handleScroll.bind(this), 150)
    window.addEventListener('scroll', this.boundScroll)
  }

constructor(props) {
    super(props);
    this.state = { xDragPos: 0, dragging: false, instructionsHidden: false };
    this.width = null;
    this.count = timeYear.count(this.props.minDate, this.props.maxDate);
    this.scrubberWidth = this.props.divisionWidth * this.count;
    this.scale = scaleTime({
      domain: [this.props.minDate, this.props.maxDate],
      range: [20, this.scrubberWidth - 20]
    });
    this._data = dodge(this.props.data, 14, d => d.date, this.scale);
    this.lastActiveX = this._data[this.props.activePoint].x;
    this.showTooltipDebounced = debounce(this.handleMouseOver, 300);
    this.dragStarted = this.dragStarted.bind(this);
    this.dragEnded = this.dragEnded.bind(this);
  }

function buildDebouncedHandler(element: EventTarget, step: SubscribeDelta): EventListener {
    let handler = function (_ev: Event): void {
        plug(element, step.Settings);
    };
    return debounce(handler, step.DebounceInterval);
}

this.onQueryChange(query);
    }
    else {
      this.setState(this.dataManager.getRenderState(), () => {
        this.props.onSearchChange && this.props.onSearchChange(this.state.searchText);
      });
    }
  }, this.props.options.debounceInterval)

  onFilterChange = (columnId, value) => {
    this.dataManager.changeFilterValue(columnId, value);
    this.setState({}, this.onFilterChangeDebounce);
  }

  onFilterChangeDebounce = debounce(() => {
    if (this.isRemoteData()) {
      const query = { ...this.state.query };
      query.page = 0;
      query.filters = this.state.columns
        .filter(a => a.tableData.filterValue)
        .map(a => ({
          column: a,
          operator: "=",
          value: a.tableData.filterValue
        }));

      this.onQueryChange(query);
    }
    else {
      this.setState(this.dataManager.getRenderState());
    }

this.editor.cm.redo();
      });
      EventBus.$on('newFile', () => {
        this.newFile();
      });
      EventBus.$on('openFile', () => {
        this.openFile();
      });
      EventBus.$on('saveFile', () => {
        this.saveFile();
      });
      EventBus.$on('saveAs', () => {
        this.saveAs();
      });
    },
    onEditorCodeChange: debounce(function(newCode) {
      this.$store.dispatch('updateCode', newCode);

      if (this.code && this.isPreview) {
        this.htmlCode = this.markdown.render(newCode);
      }
    }, 200),
    /**
     * 新規ファイルの場合に入力データをStorageに退避する
     */
    setIntervalSaveTempData() {
      if (this.path) return;

      this.saveTimer = setInterval(() => {
        this.$store.dispatch('updateTempCode', this.code);
      }, 5000);
    },

row.tableData.childRows && findSelecteds(row.tableData.childRows);
        });
      };

      findSelecteds(this.state.originalData);
      this.props.onSelectionChange(selectedRows, dataClicked);
    }
  }

  onSearchChange = searchText => {
    this.dataManager.changeSearchText(searchText);
    this.setState(({ searchText }), this.onSearchChangeDebounce());
  }

  onSearchChangeDebounce = debounce(() => {
    if (this.isRemoteData()) {
      const query = { ...this.state.query };
      query.page = 0;
      query.search = this.state.searchText;

      this.onQueryChange(query);
    }
    else {
      this.setState(this.dataManager.getRenderState(), () => {
        this.props.onSearchChange && this.props.onSearchChange(this.state.searchText);
      });
    }
  }, this.props.options.debounceInterval)

  onFilterChange = (columnId, value) => {
    this.dataManager.changeFilterValue(columnId, value);

values = {...this.props.values};
				}

				this.state = {
					values,
					formState: values,
					saved: SettingsSaver.getSavedStateOfFields(values, this.props),
					validationErrors: {}
				};
				this.originalValues = {...values};

				this.validator = new FormValidator(this.state.values);
				this.setValidationRules();

				this.handleFieldChange = this.handleFieldChange.bind(this);
				this.saveSettings = debounce(this.saveSettings.bind(this), SAVE_DEBOUNCE_DELAY);
			}