ValidatedForm.jsx

<Form.Group className="mb-3" controlId="first">
  <Form.Label>First name</Form.Label>
  <Form.Control
    type="text"
    name="first"
    placeholder="Enter your first name"
    value={formData.first}
  />
  </Form.Group>

  <Form.Group className="mb-3" controlId="last">
    <Form.Label>Last name</Form.Label>
    <Form.Control
      type="text"
      name="last"
      placeholder="Enter your last name"
      value={formData.last}
    />
  </Form.Group>

  <Form.Group className="mb-3" controlId="email">
    <Form.Label>Email address</Form.Label>
    <Form.Control
      type="email"
      name="email"
      placeholder="Enter your email address"
      value={formData.email}
    />
  </Form.Group>

  <Form.Group className="mb-3" controlId="password">
    <Form.Label>Password</Form.Label>
    <Form.Control
      type="password"
      name="password"
      value={formData.password}
    />
  </Form.Group>

  <Form.Group className="mb-3" controlId="confirm-password">
    <Form.Label>Confirm password</Form.Label>
    <Form.Control
      type="password"
      name="confirmPassword"
      value={formData.confirmPassword}
    />
  </Form.Group>

  <Form.Group className="mb-3" controlId="type">
    <Form.Label>Account type</Form.Label>
    {['personal', 'business', 'enterprise'].map((option) => (
      <div key={option} className="mb-3">
        <Form.Check
          type="radio"
          id={`type-${option}`}
          name="type"
          value={option}
          label={option.charAt(0).toUpperCase(0) + option.substring(1)}
          checked={formData.type === option}
        />
      </div>
    ))}
  </Form.Group>

  <Form.Group className="mb-3" controlId="bio">
    <Form.Label>Tell us a bit about yourself</Form.Label>
    <Form.Control
      as="textarea"
      name="bio"
      rows={3}
      value={formData.data}
    />
  </Form.Group>