Why am I only seeing the last typed character in my React input field?

I’m working on a React component where I want to update the state with the value entered in an input field. However, I’m encountering an issue where I’m unable to see what I’m typing in the input field, except for the last character.

function App() {
  const [name, setName] = useState("");
  let newName;

  function handleChange(event) {
    newName = event.target.value;
    console.log(newName);
  }

  function handleClick() {
    setName(newName);
  }

  return (
    <div className="container">
      <h1>Hello {name}</h1>
      <input
        onChange={handleChange}
        type="text"
        placeholder="What's your name?"
        value={name}
      />
      <button onClick={handleClick}>Submit</button>
    </div>
  );
}

I understand that the issue is related to the way the state is being updated, but I’m confused about why I can’t see the characters as I type. Even though handleChange is called and I can see the value in the console, the input field only displays the last typed character.

Could someone explain why this is happening and how I can fix it?

I expected that when handleChange was called, the console would print an empty string because the value of the input is bound to the name state, which is initially an empty string. However, I was surprised to see that only the last character typed was displayed in the input field.