Struggling with `useEffect` and `useState` causing unexpected stale closures in my React component

Hey everyone, I'm pulling my hair out trying to debug some unexpected behavior with my React hooks. I'm specifically running into a classic case of stale closures when I try to update state inside a useEffect hook, and it keeps using an outdated value.

It feels like the closure isn't capturing the latest state properly, and I can't quite pinpoint why. Here's a simplified version of what I'm seeing:

function MyComponent() {
  const [value, setValue] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      // This console.log always shows the initial 'value' if dependency array is empty
      console.log('Current value in closure:', value);
      setValue(value + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []); // Problematic empty dependency array

  return <div>Value: {value}</div>;
}

Any insights or common pitfalls I might be missing would be super helpful. Help a brother out please...