Вставить айтемы в промежуток массива по клику React

constructor(props) {
    super(props);
    this.state = {
      settings: [],
    };

    this.addSetting = this.addSetting.bind(this);
    this.removeSetting = this.removeSetting.bind(this);
  }

addSetting() {
    const { settings } = this.state;
    this.setState({
      settings: [
        <div className={styles.filterItem}>
            <div className={styles.input}>
              <input type="text" placeholder="Type the text" onChange={this.onInputChange} />
            </div>
            <div className={styles.buttons}>
              <button onClick={this.addSetting}>+</button>
              <button onClick={this.removeSetting}>-</button>
            </div>
          </div>,
        ...settings
    ]
    });
  }

  removeSetting(el) {
    el.preventDefault();
    const { settings } = this.state;
    settings.splice(el, 1);
    this.setState({
      settings: settings,
    });
  }
render() {
    const { settings } = this.state;

    return (
      <div className={styles.block}>
      <button type='button' onClick={this.applySettings}>Apply</button>
        <div className={styles.filterList}>
          <div className={styles.filterItem}>
            <div className={styles.input}>
              <input type="text" placeholder="Type the text" onChange={this.onInputChange} />
            </div>
            <div className={styles.buttons}>
              <button type='button' onClick={this.addSetting}>+</button>
              <button type='button' onClick={this.removeSetting}>-</button>
            </div>
          </div>
          {settings}
        </div>
      </div>
    );
  }

Подскажите пожалуйста, как можно реализовать добавление и удаление новых сеттингов в промежутке, а не в конце списка? Сейчас реализовано по нажатию на + добавление сеттингов в конец списка. А надо чтобы, например, при нажатии на + у сеттинга test1, под ним добавилось новое пустое поле.