Isn't this whole thing being made needlessly complex?

What is the correct way to provide that callback with the latest state?

The trick is to store the variable outside React and take the value from that, perform whatever needed on that value, and then update the React variable for triggering in useEffect() etc. https://playcode.io/2567999

import React, {useEffect} from 'react';

// Maintain a copy of the variable outside React
var _count = 0

export function App(title) {
  const [count, setCount] = React.useState(0);

  useEffect(() => {
    intervalTimer = setInterval(() => {

      console.log(`React count=${count}`)
      console.log(`Non React count=${_count}`)

      // Latest value is always available in _count outside React
      // Perform whatever needed on that value
      _count += 1

      // Store in the React variable for rerender / useEffect retrigger etc
      setCount(_count);
    }, 3000);
  }, []);

  return (
    <div>
      Active count {count} <br />
    </div>
  );
}