React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead. useMemo doesn’t work

How can i fix this? I see question like this where people said that useMemo can help. But this is not about like that situation and useMemo fix doesn’t work and create just more bugs.

export const Search: React.FC = () => {
  const dispatch = useDispatch();
  const [value, setValue] = React.useState<string>('');
  const inputRef = React.useRef<HTMLInputElement>(null);

  const onClickClear = () => {
    dispatch(setSearchValue(''));
    setValue('');
    inputRef.current?.focus();
  };

  const updateSearchValue = React.useCallback(
    debounce((str: string) => {
      dispatch(setSearchValue(str));
    }, 150),
    [],
  );

  const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
    updateSearchValue(event.target.value);
  };

Answer

can you try this instead? useCallback takes two params.. an inline function, and a dependency array.

const updateSearchValue = React.useCallback((str: string) => {
  debounce(() => {
    dispatch(setSearchValue(str));
  }, 150);
}, [dispatch]);

const onChangeInput = (event: React.ChangeEvent<HTMLInputElement>) => {
    setValue(event.target.value);
    updateSearchValue(event.target.value); 
  };