(Реагировать) Дочерний компонент приостанавливает свое использование Эффект, когда родительский повторный рендеринг

Обновлено: эта проблема была решена путем добавления второго параметра в хуки useEffect.

Я новичок в реакции и создаю игрушечную игру React. Я позаимствовал этот таймер, нашел здесь. Если пользователь выполняет действие и родительский компонент выполняет повторный рендеринг, таймер прекращает отсчет на короткий период времени. Согласно (https://reactjs.org/docs/hooks-effect.html), response запомнит функцию useEffect и вызовет ее позже после выполнения обновлений DOM. Если это причина, есть ли какие-либо решения или альтернативы этому? Если нет, может ли кто-нибудь указать мне правильное направление? Любая помощь будет оценена по достоинству!

Вот мой фрагмент кода для справки:

class Chalkboard extends Component {
    constructor(props) {
        super(props);
        this.state = {
            minutes: 1,
            seconds: 0,
            addSeconds: 0,
        };
    }

    updateTimer() {
        this.setState({ addSeconds: 0 });
    }

    handleTimer() {
        window.removeEventListener('keydown', this.keyHandling);
        this.setState({
            gameOver: true,
        });
    }

    render() {
       return(
           <Timer
                initialMinutes = {this.state.minutes}
                initialSeconds = {this.state.seconds}
                onTimer = {this.handleTimer}
                addSeconds = {this.state.addSeconds}
                updateTimer = {this.updateTimer}
            />
           )

}

import React, { useState, useEffect } from 'react';

const Timer = (props) => {
    const { initialMinutes = 0, initialSeconds = 0 } = props;
    const [minutes, setMinutes] = useState(initialMinutes);
    const [seconds, setSeconds] = useState(initialSeconds);

    useEffect(() => {
        let myInterval = setInterval(() => {
            if (seconds > 0) {
                setSeconds(seconds - 1);
            }
            else if (seconds === 0) {
                if (minutes === 0) {
                    clearInterval(myInterval);
                } else {
                    setSeconds(59);
                    setMinutes(minutes - 1);
                }
            }
        }, 1000);
        return () => {
            clearInterval(myInterval);
        };
    });

    useEffect(() =>{
        if (props.addSeconds>0){
            setSeconds(seconds + props.addSeconds);
            props.updateTimer()
        }
        if (minutes === 0 && seconds === 0){
            props.onTimer()
        }
    });


    return (
        <div className = "timer-container" >
            {minutes === 0 && seconds === 0 ? null: (
                <div>
                    {' '}
                    {minutes}:{seconds < 10 ? `0${seconds}` : seconds}
                </div>
            )}
        </div>
    );
};

export default Timer;