I am currently working on incorporating a form that is perfectly centered on the page, featuring standard login fields for both email and password inputs. Strangely enough, the label for the email input appears to be getting prefixed with an additional space character, even though the password label is set up in a similar manner:

https://i.sstatic.net/6bkt3.png

Here's the React component code I have:

import React, { useState } from 'react';
import Button from 'react-bootstrap/Button';
Col from 'react-bootstrap/Col';
Form from 'react-bootstrap/Form';
InputGroup from 'react-bootstrap/InputGroup';
Row from 'react-bootstrap/Row';
{useNavigate} from "react-router-dom";
{delay} from "../util/Util";
{Alert} from "reactstrap";
AuthService from "../services/AuthService";
"../css/LoginForm.css";
Logo400 from "../images/logo400.png";

export default function LoginForm() {

  {validated, setValidated} = useState(false);
  navigate = useNavigate();
  {alert, setAlert} = useState(false);
  {alertMessage, setAlertMessage} = useState('');
  {alertSeverity, setAlertSeverity} = useState('');

  handleSubmit = (event) => {
    event.preventDefault();

    const form = event.currentTarget;
    if (form.checkValidity() === false) {
      event.preventDefault();
      event.stopPropagation();
    }

    setValidated(true);

    emailInputValue = event.target.querySelector('.email').value;
    passwordInputValue = event.target.querySelector('.password').value;

    if (validateInput(emailInputValue, passwordInputValue).includes("Failure: Email")) {
                    console.log("Validate input if failure email triggered")
                    setAlertMessage("Login failed, please enter a valid email, emails must be between 4 and 50 characters.");
                    setAlertSeverity("error");
                    setAlert(true);
                    return;
        }

        if (validateInput(emailInputValue, passwordInputValue).includes("Failure: Password")) {
                    console.log("Validate input if failure password triggered")
                    setAlertMessage("Login failed, please enter a valid password, passwords must be between 6 and 12 characters.");
                    setAlertSeverity("error");
                    setAlert(true);
                    return;
        }

    payload = {
                "email": emailInputValue,
                "password": passwordInputValue,
            };

    AuthService.loginUser(payload).then(response => response.json())
        .then(async data => {
            console.log(data);
                if (data.userId && data.accessToken) {
                   setAlertMessage("Login successful");
                   setAlertSeverity("success");
                   setAlert(true);
                   authenticatedUser = {
                    "userId": data.userId,
                    "accessToken": data.accessToken,
                    }

                    localStorage.clear();
                    localStorage.setItem("authenticatedUser", JSON.stringify(authenticatedUser));

                    await delay(1000);
                    navigate("/dashboard");
                }
            }
        );

    setAlertMessage("Login failed, probably because no user exists with these credentials.");
    setAlertSeverity("error");
    setAlert(true);

    localStorage.clear();
  };

  validateInput = (email, password) => {
          if (email.length > 50) {
              return "Failure: Email entered is too long."
          }
          if (email.length < 4) {
              return "Failure: Email is invalid."
          }
          if (password.length > 12) {
              return "Failure: Password is too long."
          }
          if (password.length < 6) {
              return "Failure: Password is too short."
          } else {
              return "Success."
          }
      }

  return (
  <>
    <div id="loginFormContainer">
       {alert ? <Alert severity={alertSeverity} role="alert">{alertMessage}</Alert> : <></> }
    </div>
    <div id="centerLogin">

    <div id="loginForm">
    <Form noValidate validated={validated} onSubmit={handleSubmit}>
      <Row className="mb-3">
      </Row>
      <Row className="mb-3">
        <Form.Group as={Col} md="4" controlId="validationCustom01">
          <Form.Label>Email</Form.Label>
          <Form.Control
            required
            type="email"
            placeholder="Email"
            className="emailLoginInput"
          />
        </Form.Group>
        </Row>
        <Row className="mb-3">
        <Form.Group as={Col} md="4" controlId="validationCustom02">
          <Form.Label>Password</Form.Label>
          <Form.Control
            required
            type="password"
            placeholder="Password"
            className="passwordLoginInput"
          />
        </Form.Group>
      </Row>
      <Button type="submit" id="loginSubmit">Submit</Button>
    </Form>
    </div>
    </div>
    </>
  );
}

In addition, here's the content of LoginForm.css file:

#centerLogin {
  display: flex;
  justify-content: center;
  text-align: center;
}

#loginLogo {
  width: 20vw;
  height: 40vh;
  position: relative;
  left: 0;
  padding-top: 40px;
}

#loginForm {
  width: 30vw;
  height: 20vh;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 80vh;
  background-color: white;
  margin-top: 10vh;
  border-radius: 10px;
  color: black;
}

.passwordLoginInput, .emailLoginInput, #loginSubmit {
  width: 20vw;
}

I've attempted removing any excess margin or padding from the input fields, but so far, it hasn't yielded the desired result.

If anyone has any suggestions or solutions, I would greatly appreciate your input. Thank you!