React-Select >> Как отобразить несколько выбранных значений в списке при нажатии кнопки «Добавить»

Question

Я изменил раскрывающийся список на множественный выбор, и я хочу отображать значения в списке только при нажатии кнопки «Добавить», но она работает только для одного выбранного значения.Пожалуйста, помогите.Я пробовал несколько разных вещей, вот мой текущий код:

campaignSelect = (
    <tr>
      <th>
        <div className="select-with-button">
          <Select
            name="campaign"
            isMulti={true}
            value={this.state.selectedCampaign}
            onChange={this.handleChangeCampaign}
            options={campaignOptions}
            styles={selectStyles}
          />

          <button type="submit" onClick={this.addCampaign}>
            Add
          </button>
        </div>
      </th>
    </tr>

 handleChangeCampaign(val) {
   if (val) {
    this.setState({ selectedCampaign: val });
    } else {
    this.setState({ selectedCampaign: null });
    }
  },

addCampaign() {
   this.props.addCampaign(this.props.course_id, 
   this.state.selectedCampaign.value)
   .then(() => this.props.fetchUsers(this.props.course_id));
   this.setState({ selectedCampaign: null });
},

render() {
 const campaignList = this.props.campaigns.map((campaign) => {
  const removeButton = (
    <button className="button border plus" onClick= 
    {this.removeCampaign.bind(this, campaign.title)}>-</button>
    );
    return (
     <tr key={`${campaign.id}_campaign`}>
       <td>{campaign.title}{removeButton}</td>
     </tr>
    );
});