import "./styles.css";

import React, {useState} from 'react';

function App() {
  const [name, SetName] = useState('')

const changeHandler = (e) => {
  SetName(e.target.value)
  console.log(name)
}

  return (
    <main>
      <input
      onChange={changeHandler}
      value={name}
       />
    </main>
  );
}

export default App;

I am trying to display name from the input box, But the last character isn't visible. I tried replacing onChange with onKeyUp but the result was same. For e.g, If I type John as an input, the console only outputs Joh and skips n. Why is this happening?

link for REPL : https://replit.com/join/lqcehsaifp-gouravthakur

Screenshot for you to understand problem better