How javascript closure working in this case

Question

Why this react code print 0 1 not the current values of count and increment

import { useState, useEffect } from 'react';
import { experimental_useEffectEvent as useEffectEvent } from 'react';

export default function Timer() {
  const [count, setCount] = useState(0);
  const [increment, setIncrement] = useState(1);

  const sI=useEffectEvent(()=>{
    return setInterval(() => {
      setCount(c => c + increment);
      console.log(count,increment);
    }, 1000);
  })
  useEffect(() => {
    const id =sI();
    return () => {
      clearInterval(id);
    };
  }, []);

  return (
    <>
      <h1>
        Counter: {count}
        <button onClick={() => setCount(0)}>Reset</button>
      </h1>
      <hr />
      <p>
        Every second, increment by:
        <button disabled={increment === 0} onClick={() => {
          setIncrement(i => i - 1);
        }}>–</button>
        <b>{increment}</b>
        <button onClick={() => {
          setIncrement(i => i + 1);
        }}>+</button>
      </p>
    </>
  );
}

this is an edit on the code of react official doc Seperating events from effects challenge 2 https://react.dev/learn/separating-events-from-effects#challenges