React MUI [FilledInput] doesn't capture last the character

I’m using MUI Input Adornments to enable ‘show / hide password’ and React State to keep the final password (in order to pass it via the login).

For some reason, latest character is missing, below is a code that show the idea:
(link: https://codesandbox.io/s/passwordwithshow-c3ktnj?file=/src/App.js:0-1894)

export default function InputAdornments() {
  const [values, setValues] = React.useState({
    password: "",
    showPassword: false
  });

  const handleChange = (prop) => (event) => {
    setValues({ ...values, [prop]: event.target.value });
    console.log(values.password);
  };

  const handleClickShowPassword = () => {
    setValues({
      ...values,
      showPassword: !values.showPassword
    });
  };

  const handleMouseDownPassword = (event) => {
    event.preventDefault();
  };

  return (
    <div>
      <FormControl sx={{ m: 1, width: "30ch" }} variant="filled">
        <InputLabel htmlFor="filled-adornment- password">Password</InputLabel>
        <FilledInput
          id="filled-adornment-password"
          type={values.showPassword ? "text" : "password"}
          value={values.password}
          onChange={handleChange("password")}
          endAdornment={
            <InputAdornment position="start">
              <IconButton
                aria-label="toggle password visibility"
                onClick={handleClickShowPassword}
                onMouseDown={handleMouseDownPassword}
                edge="start"
              >
                {values.showPassword ? <VisibilityOff /> : <Visibility />}
              </IconButton>
            </InputAdornment>
          }
        />
      </FormControl>
    </div>
  );
}

As you can see in the console, ‘I’ is missing:

>Solution :

there is nothing wrong with your code, So basically what happening is when the onChange event fires it updates the state with the target value and when you’re console logging the state inside your onChange handler, it will log the prevState coz the current state is not updated yet in the states.

so if you want to use the value inside the onChange you should use the event.target.value instead of state.

console.log(password) => console.log(event.target.value)