diff --git a/packages/web-ui-registration/src/LoginForm.tsx b/packages/web-ui-registration/src/LoginForm.tsx
index 24ad530f50155..2bcbcae41a436 100644
--- a/packages/web-ui-registration/src/LoginForm.tsx
+++ b/packages/web-ui-registration/src/LoginForm.tsx
@@ -93,11 +93,15 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
 		if (loginFormRef.current) {
 			loginFormRef.current.focus();
 		}
-	}, [errorOnSubmit]);
+	}, []);
 
 	const renderErrorOnSubmit = (error: LoginErrors) => {
 		const { type, i18n } = LOGIN_SUBMIT_ERRORS[error];
-		return <Callout type={type}>{t(i18n)}</Callout>;
+		return (
+			<Callout id={`${usernameId}-error`} aria-live='assertive' type={type}>
+				{t(i18n)}
+			</Callout>
+		);
 	};
 
 	if (errors.username?.type === 'invalid-email') {
@@ -177,11 +181,7 @@ export const LoginForm = ({ setLoginRoute }: { setLoginRoute: DispatchLoginRoute
 								)}
 							</Field>
 						</FieldGroup>
-						{errorOnSubmit && (
-							<FieldGroup disabled={loginMutation.isLoading} id={`${usernameId}-error`} aria-live='assertive'>
-								{renderErrorOnSubmit(errorOnSubmit)}
-							</FieldGroup>
-						)}
+						{errorOnSubmit && <FieldGroup disabled={loginMutation.isLoading}>{renderErrorOnSubmit(errorOnSubmit)}</FieldGroup>}
 					</Form.Container>
 					<Form.Footer>
 						<ButtonGroup stretch>