State not updating [duplicate]

Question

import "./styles.css";
import React , {useEffect,useState} from 'react'

export default function App() {
  const [state,setState] = useState(0)
  const handleUserKeyPress=(e)=>{
    console.log(state);   // this console prints 0 each time no update here ...

    setState(prev=>Number(prev)+1)
  }
  useEffect(() => {

    window.addEventListener('keydown', handleUserKeyPress);
  
    return () => {
      window.removeEventListener('keydown', handleUserKeyPress);
    };
  }, []);
  return (
    <div className="App">
      <h1>Hello CodeSandbox {state}</h1>
      <h2>Start editing to see some magic happen!</h2>
    </div>
  );
}

value of state is updated on dom but when I am doing a console.log I am getting the value 0 which is initialised at the beginning .

Sandbox link for the same link