React - why i cant running for loop with useState?

Question

Using react,

There is a button and a value "x" inside a p tag.

Why the final x value is 2?

In the for loop, the final x value should be 100.

export default function Sectiom() {
  const [x, setX] = useState(1)

  const handleClick = () => {
    for (var i = 0; i < 99; i++) {
      setX(x + 1);
    }
  }

return (
<div>
<p>{x}</p>
<button onClick={handleClick}> Plus </button>
</div>
}
}