Nextjs：错误：渲染的钩子数量少于预期。这可能是由于意外的提前退货声明造成的

这是我的代码：

const runTimer = () => {
    useInterval(() => {
        if (time == 1) {
            setResend(true)
        }
        setTime(time - 1);
    }, (time > 0) ? 1000 : null);

    return("Start")
}

return (
    <div>
        {resend && (
            <div className={styles.timer}>{runTimer()}</div>
        )}
    </div>
)

On time == 1 and setResend(false)我收到此错误：

Error: Rendered fewer hooks than expected. This may be caused by an accidental early return statement.

我想展示我的div当计时器等于 1 后，如果我点击div, 定时器再次运行

EDIT:

我将我的代码更改为：

useEffect(() => {
    const interval = setInterval(() => {
        setTime(
            (currentTime) => {
                if (currentTime > 0) {
                    return currentTime - 1;
                } else {
                    setResend(false)
                    clearInterval(interval);
                    return currentTime;
                }
            }
        );
    }, 1000);
    return () => clearInterval(interval)
}, [])
return <p>{time}</p>

但还没有工作！