React Bootstrap form

import React from "react";
import PropTypes from "prop-types";
import {
  Card,
  ListGroup,
  Row,
  Col,
  Form,
  FormGroup,
  Button,
} from "react-bootstrap";

const handleOnSubmit = (event) => {
  event.preventDefault();
  event.stopPropagation();

  // get the form and put each key/value pair into the object
  const form = new FormData(event.currentTarget);
  const data = {};
  const allErrors = {};
  form.forEach((value, key) => {
    // If the value is blank, set the errors
    // Make sure value is not 0
    if (
      (value && typeof value === "string") ||
      (value && value.size && value.size > 0)
    ) {
      data[key] = value;
    } else {
      allErrors[key] = true;
    }
  });
};

const UserAccountDetails = ({
  title,
  city,
  setCity,
  state,
  zip,
  email,
  firstName,
  lastName,
  address,
}) => (
  <Card small className="mb-4">
    <Card.Header className="border-bottom">
      <h6 className="m-0">{title}</h6>
    </Card.Header>
    <ListGroup flush>
      <ListGroup.Item className="p-3">
        <Row>
          <Col>
            <Form onSubmit={handleOnSubmit}>
              <Row form>
                {/* First Name */}
                <Col md="6" className="form-group">
                  <Form.Label htmlFor="feFirstName">First Name</Form.Label>
                  <Form.Input
                    id="feFirstName"
                    placeholder="First Name"
                    value={firstName}
                    onChange={() => {}}
                  />
                </Col>
                {/* Last Name */}
                <Col md="6" className="form-group">
                  <Form.Label htmlFor="feLastName">Last Name</Form.Label>
                  <Form.Input
                    id="feLastName"
                    placeholder="Last Name"
                    value={lastName}
                    onChange={() => {}}
                  />
                </Col>
              </Row>
              <Row form>
                {/* Email */}
                <Col md="6" className="form-group">
                  <Form.Label htmlFor="feEmail">Email</Form.Label>
                  <Form.Input
                    type="email"
                    id="feEmail"
                    placeholder="Email Address"
                    value={email}
                    onChange={() => {}}
                    autoComplete="email"
                  />
                </Col>
                {/* Password */}
                <Col md="6" className="form-group">
                  <Form.Label htmlFor="fePassword">Password</Form.Label>
                  <Form.Input
                    type="password"
                    id="fePassword"
                    placeholder="Password"
                    value="EX@MPL#P@$$w0RD"
                    onChange={() => {}}
                    autoComplete="current-password"
                  />
                </Col>
              </Row>
              <FormGroup>
                <Form.Label htmlFor="feAddress">Address</Form.Label>
                <Form.Input
                  id="feAddress"
                  placeholder="Address"
                  value={address}
                  onChange={() => {}}
                />
              </FormGroup>
              <Row form>
                {/* City */}
                <Col md="6" className="form-group">
                  <Form.Label htmlFor="feCity">City</Form.Label>
                  <Form.Input
                    id="feCity"
                    placeholder="City"
                    value={city}
                    onChange={(e) => {
                      setCity(e.target.value);
                    }}
                  />
                </Col>
                {/* State */}
                <Col md="4" className="form-group">
                  <Form.Label htmlFor="feInputState">State</Form.Label>
                  <Form.Select id="feInputState">
                    <option>{state}</option>
                    <option>ID</option>
                  </Form.Select>
                </Col>
                {/* Zip Code */}
                <Col md="2" className="form-group">
                  <Form.Label htmlFor="feZipCode">Zip</Form.Label>
                  <Form.Input id="feZipCode" placeholder="Zip" value={zip} />
                </Col>
              </Row>
              <Row form>
                {/* Description */}
                <Col md="12" className="form-group">
                  <Form.Label htmlFor="feDescription">Description</Form.Label>
                  <Form.Control as="textarea" id="feDescription" rows="4" />
                </Col>
              </Row>
              {/* TODO: Create onClick for updating information when API is created. */}
              <Button theme="accent" type="submit" onClick={(e) => handleOnSubmit(e)}>
                Update Account
              </Button>
            </Form>
          </Col>
        </Row>
      </ListGroup.Item>
    </ListGroup>
  </Card>
);

UserAccountDetails.propTypes = {
  /**
   * The component's title.
   */
  title: PropTypes.string,
};

UserAccountDetails.defaultProps = {
  title: "Account Details",
};

export default UserAccountDetails;