React: Error-Message does not show up, while others do? - html

Question

I have this simple Login-Form, in which I want to display an Error-Message, which contains Login tries (3 tries possible). Somehow, my one errormessage (loginTries) is not being displayed. Why?
My form is running the method handleSubmitAndStartTimer() when I submit it. You can find more comments and details below:
export const Login = () => {
const [errorMessages, setErrorMessages] = useState({});
const [loginFailCounter, setLoginFailCounter] = useState(2);
const [firstTimeSubmitted, setFirstTimeSubmitted] = useState(false);
const mockUserData = [
{
username: "user1",
password: "pass1",
istGesperrt: false,
},
];
const handleSubmitAndStartTimer = (event) => {
setFirstTimeSubmitted(true);
event.preventDefault();
var { benutzername, passwort } = document.forms[0];
const userData = mockUserDaten.find(
(user) => user.username === benutzername.value
);
// Compare user info
if (userData) {
if (!userData.istGesperrt) {
if (userData.password !== passwort.value) {
setLoginFailCounter(loginFailCounter - 1);
// THIS DOESNT WORK!
setErrorMessages({ name: "loginTries", message: errors.loginTries, });
// ALL THESE ERROR MESSAGES WORK!
// Invalid password
setErrorMessages({ name: "passwort", message: errors.passwort });
} else {
// Username not found
setErrorMessages({
name: "benutzername",
message: errors.benutzername,
});
}
} else {
setErrorMessages({
name: "userGesperrt",
message: errors.userGesperrt,
});
}
}
};
// This method is called to display to correct message
const renderErrorMessage = (name) =>
name === errorMessages.name && (
<div className="error">{errorMessages.message}</div>
);
const errors = {
benutzername: "invalid username",
passwort: "invalid password",
loginTries: loginFailCounter + " Tries possible!",
userGesperrt: "",
};
const renderForm = (
<div className="form">
<form onSubmit={handleSubmitAndStartTimer}>
<div className="input-container">
<label for="benutzername">Benutzername</label>
<input type="text" id="benutzername" name="benutzername" required />
{renderErrorMessage("benutzername")}
</div>
<div className="input-container">
<label for="passwort">Passwort</label>
<input type="passwort" id="passwort" name="passwort" required />
{renderErrorMessage("passwort")}
</div>
<div className="button-container">
<input type="submit" value="Log in" />
</div>
{renderErrorMessage("userGesperrt")}
// THIS MESSAGE ISNT BEING SHOWN!
{renderErrorMessage("loginTries")}
</form>
</div>
);
return (
<div className="app">
<div className="login-form">
<div className="title">Sign In</div>
{isSubmitted ? <div>User is successfully logged in</div> : renderForm}
</div>
</div>
);
};
export default Login;