Reactjs - add a component when click button

I have a dilemma that I can't find a solution to. I want to import many products while they may have the same category so when I click "+", the display will add a similar form below old form

state = {
  listItems: [],
  userInput: this.need,
}

need = {
  category: "",
  name: "",
  quantity: ""
}
    handleChange = (event) => {
        const target = event.target;
        const value = target.value;
        const name = target.name;
        let userInput = { ...this.state.userInput };
        userInput[name] = value;
        this.setState({ userInput });
    }
    submitHandler = e => {
        e.preventDefault()
        this.setState({
            listItems: [...this.state.listItems, this.state.userInput],
        })
    }
<Form>
<Form.Group id="need">
    <Row>
     <Col md="3">
       <label>Category</label>
       <select name="category" className="form-control" onChange={this.handleChange}>
         <option value="1">Water</option>
         <option value="2">Food</option>
       </select>
    </Col>
    <Col md="4">
      <label>Name</label>
        <Input
           name="name"
           className="form-control-alternative"
           onChange={this.handleChange}
           type="text"
         />
    </Col>
    <Col md="4">
      <label>Quantity</label>
      <Input
        name="quantity"
        className="form-control-alternative"
        type="text"
        onChange={this.handleChange}
      />
   </Col>
   <Col>
Add more
   </Col>
</Row>
</Form.Group>
</Form>

I have seen many tutorials on the internet and followed them but they all failed. I don't know how to do this. Please help me! Thank you very much