Can some explain the difference between these two codes?

Question

there are 2 different codes can some explain the for loop condition in this codes? `

import './App.css';
import React, { useState } from 'react'
function App() {
  const [count,setCount]=useState(0)
  function updateCounter()
  {
   
    for(let i=0;i<5;i++)
    {
      setCount((pre)=>pre+1)
    }
  }
  return (
    <div className="App">
      <h1>{count}</h1>
      <button  onClick={updateCounter}>Click Me to Update counter</button>
    </div>
  );
}
export default App;

`

`

``
import './App.css';
import React, { useState } from 'react'
function App() {
  const [count,setCount]=useState(0)
  function updateCounter()
  {
    
    for(let i=0;i<5;i++)
    {
      setCount(count+1)
    }
  }
  return (
    <div className="App">
      <h1>{count}</h1>
      <button  onClick={updateCounter}>Click Me to Update counter</button>
    </div>
  );
}
export default App;

`

what exactly is happening in the forloop can anyone help me out why it is giving different outputs for every onclick event?