Grouping components to make sub-components - reactjs

Question

I am trying to make what I think is called sub components in React though I can't find any official up to date documentation on how to do this. My issue is I would like to make a large form with different sections broken up as bootstrap cards, within a card I want an arbitrary number of rows of inputs.
Ex)
Section 1
First_Name Last_Name
Email_Address
Section 2
Address
City State Zip
The code looks something like this for Section 1:
<div className="MyCard floatingCard card">
<h5 className="MyCardHeader card-header">Section 1</h5>
<div className="MyCardBody card-body">
{/* Row 1 */}
<div className="row">
<div className="form-group col-md-6" style={{ marginBottom: "2em" }}>
<input />
</div>
<div className="form-group col-md-6" style={{ marginBottom: "2em" }}>
<input />
</div>
</div>
{/* Row 2 */}
<div className="row">
<div className="form-group col-md-12" style={{ marginBottom: "2em" }}>
<input />
</div>
</div>
</div>
</div>
The above is not very clean, and I would also need to do the same for section 2, is there a way to make this look like:
<FormSection header="Section1">
<FormRow>
<Input name="firstName" label="First Name" />
<Input name="lastName" label="Last Name" />
</FormRow>
<FormRow>
<Input name="email" label="Email address" />
</FormRow>
</FormSection>
<FormSection header="Section2">
<FormRow>
<Input name="email" label="Email address" />
</FormRow>
<FormRow>
<Input name="city" label="City" />
<Input name="state" label="State" />
<Input name="zip" label="Zip" />
</FormRow>
</FormSection>