Create an input field that will avoid React "onChange" and has debounce functionality.

InputField.tsx

import { type FC, useEffect, useRef, type InputHTMLAttributes, type ChangeEvent } from 'react';

export interface InputField extends InputHTMLAttributes<HTMLInputElement> {
  debounceTimeout: number;
}

export const InputField: FC<InputField> = ({ value: defaultValue, onChange, debounceTimeout = 1, ...props }) => {
  const timeoutInfo = useRef({ onChange, timeout: 0 });
  Object.assign(timeoutInfo.current, { onChange });

  const setDebouncedValue = (e: ChangeEvent<HTMLInputElement>) => {
    const scope = timeoutInfo.current;
    if (debounceTimeout === 0) {
      return scope.onChange?.(e);
    }

    window.clearTimeout(scope.timeout);
    scope.timeout = window.setTimeout(() => {
      scope.onChange?.(e);
    }, debounceTimeout);
  };

  useEffect(() => () => window.clearTimeout(timeoutInfo.current.timeout), []);

  return <input {...props} defaultValue={defaultValue} onChange={setDebouncedValue} />;
};