"Why can't I access an updated state value in React immediately?"

Because it's not how React works. Updating a state in React triggers a new render (React calls your component function again with a new state). You can access the updated state variable during this new render.

Other solution is to use callback function like:

There’s a callback on setState if you need it immediately

State updates are asynchronous

So what's the solution?

Closure

React batches changes and updates only after the whole function is done running. Hence a log immediately after changing set only had access to the initial state.

What are you using to create this awesome code animation?

Nice content mate, but it never ceases to amaze me how weirdly architected React is.