Unexpected behavior when using setInterval function in React useEffect [duplicate]

UPDATE - None of the responses to the duplicated questions provide an explanation for how the line return () => { clearInterval(id); }; resolves the issue. Instead, they simply suggest removing the strict mode to fix it. Can anyone offer a detailed explanation for this solution, rather than repeating the advice to remove the <React.StrictMode> from the App?

QUESTION - I'm encountering a peculiar behavior in my React application when using a cleanup function in conjunction with setInterval inside a useEffect hook. Specifically, when I hide the cleanup function, the count is always incrementing by two instead of one. However, when I add the cleanup function, the count increments by one as expected.

Here's the code snippet:

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

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);
    // When the cleanup function below is uncommented, everything works as expected.
    // return () => {
    //   clearInterval(id);
    // };
  }, []);

  return (
    <div className="Timer">
      <h2>Timer Two</h2>
      <h3>{count}</h3>
    </div>
  );
}

export default Timer;

I've noticed that removing <React.StrictMode> from index.js resolves the issue without the need for the cleanup function.

Can anyone shed light on why this behavior is occurring? What is the role of <React.StrictMode> in this context? I'd appreciate any insights or solutions to help me understand and address this issue. Thank you!