typeWritter effect problem inside the useEffect

the code bellow skips index 1 of my text, and shows just “hllo world”

export default function App() {
  const [message, setMessage] = useState("");
  const index = useRef(0);
  const text = "hello world";

  useEffect(() => {
    const interval = setInterval(() => {
      setMessage(text.substring(0, index.current));
      index.current++;
    }, 500);

    return () => clearInterval(interval);
  }, []);

  return (
    <div className="App">
      <h1>{message}</h1>
    </div>
  );
}

But if i change this set state to

setMessage(text.substring(0, index.current));

this works well, and i dont know because.