When does the useEffect's callback's return statement execute?

I'd like to clarify my understanding of what's happening here. Any detail to improve my current understanding'd be appreciated.

function Timer() {

    let [time, setTime] = useState(5);

    useEffect(() => {
        let timer = setInterval(() => {
          setTime(time - 1);
        }, 1000)
        return () => clearInterval(timer);
    }, );

    return <div>{time}</div>
}

export default Timer

https://codesandbox.io/s/cranky-chaplygin-g1r0p

1. time is being initialised to 5.
2. useEffect is read. Its callback must be made ready to fire later.
3. The div is rendered.
4. useEffect's callback is executed. setInterval's callback gets ready to fire. Surely useEffect's return statement doesn't fire here, because if it did it would cancel the timer (and the timer does work).
5. After, roughly, 1 second, setInterval's callback fires changing the state of time (to 4).
6. Now that a piece of state has changed, the function is re-executed. time, a new variable, is initialised to the new time state.
7. A new useEffect is read, it's callback made ready to fire later. (This happens because there is no 2nd argument of useEffect()).
8. The component function's return statement is executed. This effectively re-renders the div.
9. At some point, the previous useEffect's return statement executes (which disables the timer in that previous useEffect). I'm not sure when this occurs.
10. The 'new' useEffect's callback is executed.

from When does the useEffect's callback's return statement execute?