i have used redux form - Fieldarray to create a dynamic form. when ever i add a filter a field get added, my doubt is when i select a value from a dropdown the same value should not populate in the other select field.refer the image

 <form onSubmit={handleSubmit(filterSubmit)}>
        {fields.map((member, index) => {
          return (
            <div className="c-popover__body g-block" key={index}>
              <ul className="g-list g-list--borders g-list-display">
                <li className="g-list__item list_item_flt">
                  <fieldset className="c-form__field">
                    <Field
                      name={`${member}.field`}
                      type="select"
                      component="select"
                      label="Last"
                      className="o-select"
                      onChange={removeSelectedField}>
                      <option value=""></option>
                      {allFieldDisplay.map((each, index) => (
                        <option value={each.fieldValue} key={index}>{each.fieldName}</option>
                      ))}
                    </Field>
                  </fieldset>
                </li>
                <li className="g-list__item list_item_flt m-top">
                  <button className="o-btn o-btn--neutral o-btn--tooltip js-modal-trigger" onClick={() => toggleFilterPattern(index + 1)} type="button" aria-label="Settings" data-modal="alert-settings">
                    <svg title="Settings" className="o-icon ">
                      <svg xmlns="w3.org/2000/svg" viewBox="0 0 11 14" id="settings-icon" width="100%" height="100%"><title>Settings</title>
                        <path d="M9.455 3.28a2.216 2.216 0 0 0-1.31 0V1a.655.655 0 1 1 1.31 0v2.28zm0 4.167V13a.655.655 0 1 1-1.31 0V7.447a2.216 2.216 0 0 0 1.31 0zM8.8 7.016a1.66 1.66 0 0 1-1.67-1.652c0-.912.746-1.653 1.67-1.653.924 0 1.67.741 1.67 1.653A1.66 1.66 0 0 1 8.8 7.016zm-5.945-.463a2.216 2.216 0 0 0-1.31 0V1a.655.655 0 1 1 1.31 0v5.553zm0 4.167V13a.655.655 0 1 1-1.31 0v-2.28a2.216 2.216 0 0 0 1.31 0zm-.655-.431c-.924 0-1.67-.741-1.67-1.653A1.66 1.66 0 0 1 2.2 6.984c.924 0 1.67.74 1.67 1.652 0 .912-.746 1.653-1.67 1.653z" transform="translate(.349)"></path></svg>
                    </svg>
                  </button>
                </li>
                <li className="g-list__item list_item_flt m-top">
                  <fieldset className="c-form__field">
                    <Field name={`${member}.value`} component="input" type="value" placeholder="value"
                      className="o-input" />
                  </fieldset>
                  {/* <fieldset className="c-form__field">
                    <div className="c-form__sub-field">
                      <label className="o-label" htmlFor="fromDate">From</label>
                      <input className="o-input o-input--date js-datepicker" type="date" id="fromDate" data-format="DD/MM/YYYY" />
                    </div>
                    <div className="c-form__sub-field">
                      <label className="o-label" htmlFor="fromTime">At</label>
                      <input className="o-input o-input--time" type="time" id="fromTime" step="1" />
                    </div>
                  </fieldset> */}
                </li>
                <li className="g-list__item list_item_flt m-top">
                  <button className="o-more-btn c-horizontal-card__more-btn js-popover-trigger filter-option"
                    onClick={() => toggleFilterRemove()}>
                    <span className="u-visually-hidden">Actions</span>
                  </button>
                </li>
              </ul>
              {isFilterPatternVisible && filterPatternIndex === index + 1 && <div className="g-radio-buttons popup-list" key={index}>
                <fieldset className='o-radio-button'>
                  <Field component="input" type="radio" className="o-radio-button__input" id="exactMatch" name={`${member}.match`} value="exactMatch" />
                  <label htmlFor="exactMatch" className="o-radio-button__label">Exact Match</label>
                </fieldset>

                <fieldset className='o-radio-button'>
                  <Field component="input" type="radio" className="o-radio-button__input" id="contains" name={`${member}.match`} value="contains" />
                  <label htmlFor="contains" className="o-radio-button__label">Contains</label>
                </fieldset>

                <fieldset className='o-radio-button'>
                  <Field component="input" type="radio" className="o-radio-button__input" id="startsWith" name={`${member}.match`} value="startsWith" />
                  <label htmlFor="startsWith" className="o-radio-button__label">Start with</label>
                </fieldset>

                <fieldset className='o-radio-button'>
                  <Field component="input" type="radio" className="o-radio-button__input" id="endWith" name={`${member}.match`} value="endWith" />
                  <label htmlFor="endWith" className="o-radio-button__label">End with</label>
                </fieldset>

              </div>
              }
              <div className={`c-popover js-popover is-ready ${isfilterRemove ? '' : 'is-hidden'}`} data-container=".js-content__scrollable" style={{ top: '121px', left: '385px' }}>
                <div className="c-popover__body">
                  <div className="c-actions-list">
                    <ul className="c-actions-list__list">
                      <li className="c-actions-list__item">
                        <button className="o-btn o-btn--inline" type="button" onClick={() => {
                          fields.remove(index);
                          toggleFilterRemove()
                        }}>
                          Delete        </button>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          )
        })}

        <div className="c-popover__primary-actions">
          <button type="button" onClick={() => fields.push({})}
            className="o-btn o-btn--neutral js-popover-trigger has-popover-displayed">
            + Add filter
          </button>
          {fields.length > 0 && <button className="o-btn o-btn--inline u-accent-color g-float" type="submit">
            Apply
          </button>}
        </div>
      </form>

onchange event triggers whenever select option is changed. i tried to get fromvalues and cross check those values with select option values and separate all selected values.

const removeSelectedField = () => {
  let fields = [];
  _map(allFormValues.filter, (each) => {
    _map(allFieldDisplay, (list) => {
      if (each.field === list.fieldValue) {
        fields.push(list);
      }
    })
  })

  unSelectedField = _differenceWith(unSelectedField, fields)
  this.setState({ allUnselectedFields: unSelectedField })
}