在React中再次调用函数时，Lodash _.debounce不会取消现有计时器

import React, { useCallback, useEffect } from 'react';
import _ from 'lodash';

const MyComponent = () => {
  const debouncedFunction = useCallback(_.debounce(() => {
    // 在这里编写需要延迟执行的函数逻辑
  }, 500), []);

  useEffect(() => {
    return () => {
      debouncedFunction.cancel(); // 在组件卸载时取消计时器
    };
  }, [debouncedFunction]);

  const handleClick = () => {
    debouncedFunction(); // 调用debouncedFunction函数
  };

  return (
    <button onClick={handleClick}>Click Me</button>
  );
};

export default MyComponent;