React Typescript: Add another row of fields to form with button

I'm building a product sales form that allows users to add a product name, quantity, and price. By default I want the form to show 3 rows and if they want to add another product, there would be a button that says "Add Product" which will then add another two of product name, quantity, and price.

I want to set the limit to allow to a max of 10 rows (10 products).

addProductRow(event) {     event.preventDefault();}<div className={`${styles.flexWrap} ${styles.flexRow}`}><div><label>            Product Name</label><input            value={this.state.DetailedDescription1}            onChange={this.handleChangeDetailedDescription1}            type="text"            className="phone validate"            name="Detailed Description"            maxLength={45}        /></div>  <div><label>            Quanitity</label><input            value={this.state.Quantity1}            onChange={this.handleChangeQuantity1}            type="number"            className="phone validate"            name="Quantity #1"            maxLength={9}            pattern='[0-9]{0,5}'        /></div><div><label>            Total</label><input            value={this.state.Total1}            onChange={this.handleChangeTotal1}            type="number"            className="phone validate"            name="Quantity #1"            maxLength={9}            pattern='[0-9]{0,5}'        /></div></div><button onClick={this.addProductRow}>Add New Product</button><button onClick={this.removeProductRow}>X</button>

So when the user clicks "Add New Product" a new row will show with the above fields labeled this.state.DetailedDescription2 and this.handleChangeDetailedDescription1 and so forth.