关于react中使用hooks写开启关闭定时器

import React, { useState, useEffect, useRef, useCallback } from 'react';
import { Form, Input, Button, message } from 'antd';

function Login(props: any) {
  const [count, setCount] = useState(0);
  const [hasOpen, setHasOpen] = useState(false);

  let timer: any = useRef()
  const start = useCallback(() => {
    if (!hasOpen) {
      setCount(0)
      clearInterval(timer.current)
      return
    }
    timer.current = setInterval(() => {
      setCount((count) => count + 1)
    }, 1000)
  }, [hasOpen])

  useEffect(() => {
    start()
  }, [hasOpen]);

  return (
    <div className={style.mainContent}>
      <div>倒计时：{count}</div>
      <br />
      <br />
      &nbsp; &nbsp;<Button type='primary' onClick={() => {
        setHasOpen(true)
      }}>开启</Button>
      &nbsp;&nbsp;<Button type='primary' danger onClick={() => {
        setHasOpen(false)
      }}>关闭</Button>
    </div>
  );
}

function mapStateToProps(state: any) {
  return state;
}

export default connect(mapStateToProps)(Login);