react hook如何清空定时器？

react版本：16.6.0

事情是这样的。一开始，是父组件来维护输入框数据的，useeffect会监听输入框的变化，然后做出操作。

但是我不想每次操作太频繁，于是在子组件这里让输入框维护自己的数据，不再去用父组件的数据。

在子组件里，当输入框数据变化时，我会每隔一段时间给父组件传递输入框的数据，进而触发父组件的操作。

但现在问题是，我发现我无法清空子组件的定时器，这个该如何操作？

const FilterHeader = ({ handleInput}) => {
    // 防抖
   const timerId = useRef()
   const [val, setVal] = useState('')
   const onChange = (e) => {
      const value=e.target.value
      setVal(value)
      clearTimeout(timerId.current)
      timerId.current = setTimeout(() => {
         handleInput('name',value)
         clearTimeout(timerId.current)
      }, 600)
   }

   useEffect(()=>()=>{
      console.log(timerId)
      clearTimeout(timerId.current)
      console.log(timerId)  // 没有清掉
   },[])
    
    return    <Input
               type="text"
               size="small"
               name="name"
               placeholder="输入关键词搜素"
               onChange={onChange}
            />
}