Как я могу динамически отображать / скрывать поля на основе выпадающего списка в массивах полей с помощью Redux-Form

Question

У меня сейчас очень сложная форма, и я пытаюсь показать разные поля на основе выпадающего списка. Я использую <FieldArrays>, поэтому моя проблема в том, что все условно отображаемые поля имеют одинаковые значения. Вот что я пытался сделать, но он просто не работает:

Компонент массива поля

const renderOfferInputParent = ({ fields, hasEmailValue, meta: { touched, error, submitFailed } }) => (
        <div>
          <br/>
            <div className="row">
            <div className="col-lg-10">
              </div>
              <div className="col-lg-2">
              <Button color="success" className="float-right" onClick={() => fields.push({})}>Add Input Group</Button>
              {(touched || submitFailed) && error && <span>{error}</span>}
              </div>
              </div>
            {fields.map((questionAnswers,  index) => (
              <div>
                <br/>
              <div className="row">
              <div key={index} className="col-lg-12">
              <h4>Input #{index + 1}</h4>
             </div>
          </div>
          <Row>
            <Col lg={1}>
            <Button color="danger"
                  className="removeofferInputParent"
                  type="button"
                  title="Remove Parent Attribute"
                  onClick={() => fields.remove(index)}><i className="fa fa-close"></i></Button>
            </Col>
                      <Col lg={3}>
                        <Field name={`${questionAnswers}.text`}
                          type="text"
                          component={renderField}
                          label="Answer"
                        />
                      </Col>
                      <Col lg={3}>
                      <Field type="select"
                    name={`${questionAnswers}.question_actions`}
                    component={renderOfferActionDropdown}
                    value={this.state.questionAction}
                    onChange={this.handleChangeForActions}
                    label="Action"
                    />
                    </Col>
                    <Col lg={3}>
                    <Field type="select"
                    name={`${questionAnswers}.actions`}
                    component={renderActionDropdown}
                    value={this.state.questionAction}
                    onChange={this.handleChangeForActions}
                    label="Offer Action"
                    />
                    </Col>

                    </Row>
                    <Row>
                      <Col lg="12">
                      <FieldArray name="additionalAction" component={renderAdditionalAction}/>

                      </Col>
                    </Row>
                    <br/>
                    <Row>
                  <Col lg="12">
                    {
                      this.state.questionAction === 'offer_action_hardcoded' ?
                        <div>
                          <Row>
                            <Col lg="4">
                            <Label>Advertiser</Label>
                            <Field name="advertisers"
                              component={renderUserAttributeList}
                              type="select"
                            />
                            </Col>
                            <Col lg="4">
                            <br/>
                            <label htmlFor="linkoutHasRevenue">Linkout has revenue</label>&nbsp;&nbsp;&nbsp;
                            <Field name={`${offerInputParent}.linkoutHasRevenue`} id="linkoutHasRevenue" component="input" type="checkbox"/>
                            </Col>
                          </Row>

                        </div>
                      : this.state.questionAction === 'offer_action_linkout' ?
                      <Row>
                            <Col lg={3}>
                            <Field name="criteriaUserAttributesAndOr"
                            component={renderUserAttributeAndOr}
                            type="select"/>
                            </Col>
                            <Col lg={8}>

                            </Col>
                          </Row>
                           : null
                    }
                    </Col>
                    </Row>
                    <Row>
                      <Col lg="4">
                      </Col>
                      <Col lg="4">
                        <Field name={`${questionAnswers}.url`}
                          component={renderField}
                          type="text"
                          label="URL"
                        />
                      </Col>
                      <Col lg="2">
                        <Label>Show HTTP settings</Label>
                      </Col>
                    </Row>
                    <hr/>
                    </div>
            ))}
        </div>
        );

Состояние

   constructor(props) {
      super(props)
      this.state = {
        userAttribute: 'select',
        questionAction: [],
        questionActionChildren: 'select',
       }
      this.handleChangeForUserAttribute = this.handleChangeForUserAttribute.bind(this);
      this.handleChangeForActions = this.handleChangeForActions.bind(this);
    }

Field Array Call

 <FieldArray name="questionAnswers" component={renderOfferInputParent} />

Я собираюсь включить изображение того, что я объяснял.

Доходы рекламодателя и компоновщика всегда имеют одинаковые значения, но я пытаюсь сделать их независимыми. Кроме того, всякий раз, когда я выбираю из выпадающего списка Действие, это изменяется для обеих групп ввода, но должно изменяться только для одной. Спасибо за любую помощь заранее