Stopwatch using react useState hook + setInterval causing an extra interval to launch when resumed

I am implementing a stopwatch with start and pause button. Start button calls setInterval and pause button calls clearInterval. Pressing start and then pause button works as expected, but another press to start button causes two intervals to launch, while the code is creating only one interval.

import React, {useState} from "react";

function StopWatch() {
    const [count, setCount] = useState(0);
    const [intervalID, setIntervalID] = useState(undefined);

    console.log('Rendering, intervalID =', intervalID);

    return (
        <div>
            <p>Counter: {count}</p>

            <button onClick={
                () => {
                    setIntervalID(oldId => {
                        if (oldId === undefined) {
                            const newId = setInterval(() => {
                                setCount(count => count + 1);
                            }, 1000);
                            console.log('Started Interval with ID =', newId);
                            return newId;
                        } else {
                            console.log('Skipping, IntervalID =', oldId);
                            return oldId;
                        }
                    });
                }
            }>Start
            </button>

            <button onClick={
                () => {
                    setIntervalID(oldId => {
                        console.log('Stopping IntervalID =', oldId);
                        clearInterval(oldId);
                        return undefined;
                    });
                }
            }>Pause
            </button>
        </div>
    );
}

These are the console log messages for pressing button start, pause, start.

Rendering, intervalID = undefined
Started Interval with ID = 10
Rendering, intervalID = 10 
Stopping IntervalID = 10 
Rendering, intervalID = undefined 
Started Interval with ID = 11 
Rendering, intervalID = 11 
Rendering, intervalID = 12

As you can see at the end an extra interval with ID 12 is created.

Answer

The problem was due to strict mode. But I wondered why there was no console.log message about starting the extra interval. After looking in react documentation I came across this.

Starting with React 17, React automatically modifies the console methods like console.log() to silence the logs in the second call to lifecycle functions. However, it may cause undesired behavior in certain cases where a workaround can be used.