FormGroup combined with InputGroup doesn't render properly due to mis-placed class name 'mb-3'

[bpietsch]

• components: InputGroup FormGroup
• reactstrap version 9.2.0
• import method csj
• react version 18.2.0
• bootstrap version 5.3.1

What is happening?

When combining InputGroup and FormGroup, the "mb-3" css class should be placed on the InputGroup element, not the FormGroup element

Pure bootstrap:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>

Code 1

if I use the following reacstrap code

<InputGroup className="mb-3">
  <FormGroup floating>
    <Input
      id="foo
    <Label for="foo">
      Foo
    </Label>
  </FormGroup>
  <span className="input-group-text"><i className="fas fa-times" /></span>
</InputGroup>

"mb-3 is added to the form group div, resulting in the add-on being taller than the input it is attached to.

Error message in console

None

[bpietsch]

Uploaded the wrong screenshot for the correct case...