每次单击react后延长超时时间

假设有以下简单的组件。当我点击按钮时,信息将变为 Clicked 一秒钟,然后回到 - .但是,当我发送垃圾邮件时,我希望标题是 点击 但它应该回到过去 - 之后 最后的 点击按钮。基本上,我希望每次点击都能延长超时时间。

如果这是一个简单的JS函数,我只需在每次单击后清除间隔并设置另一个超时。但是,我不确定如何使用react钩子实现相同的结果。

import ReactDOM from 'react-dom';
import {useEffect, useState} from 'react';
import './index.css';

const Test = () => {
    const [message, setMessage] = useState("-");

    const buttonClick = () => {
        setMessage("Clicked");
    }
    useEffect(() => {
        if(message !== "-") {
            const id = setTimeout(() => {
                console.log("Running Interval");
                setMessage("-");
            }, 1000);

            return () => {
                console.log("Clearing Interval");
                clearTimeout(id);
            }
        }
    }, [message]);

    return (
        <article>
            <header>
                {message}
            </header>
            <button onClick={buttonClick}>button</button>
        </article>
    );
}