Как исправить, что атрибут ‹attribute› не является полученным аспектом в слайдере React-InstantSearch ConnectedRange в Algolia?

Я использую ползунок диапазона с react-instantsearch и пытаюсь управлять реквизитом attributeName с помощью переменной в состоянии моего компонента.

Ползунок (код которого ниже) вызывается из родительского компонента так:

<InstantSearch
    appId='etc'
    apiKey='etc etc'
    indexName='etc'
 >
    <InstantSearchSlider
        updatePriceAttributeName={this.props.updatePriceAttributeName}
        min={this.props.min}
        max={this.props.max}
        attributeName={this.state.currentAttributeName}
     />
</InstantSearch>

Однако, когда я меняю значение currentAttributeName в state, я встречаюсь с этой ошибкой:

Uncaught Error: prices.hourly.ten is not a retrieved facet.
    at SearchResults../node_modules/algoliasearch-helper/src/SearchResults/index.js.SearchResults.getFacetValues (index.js:640)
    at ProxyComponent.getProvidedProps (connectRange.js:119)
    at ProxyComponent.getProvidedProps (createConnector.js:259)
    at ProxyComponent.componentWillReceiveProps (createConnector.js:168)
    at ProxyComponent.componentWillReceiveProps (createPrototypeProxy.js:44)
    at ReactCompositeComponent.js:610
    at measureLifeCyclePerf (ReactCompositeComponent.js:75)
    at ReactCompositeComponentWrapper.updateComponent (ReactCompositeComponent.js:609)
    at ReactCompositeComponentWrapper.receiveComponent (ReactCompositeComponent.js:546)
    at Object.receiveComponent (ReactReconciler.js:124)

Я хочу, чтобы мои пользователи выбирали один атрибут из списка возможных атрибутов. Есть ли способ сделать это?

// InstantSearchSlider.js
// nearly a full copy/paste from algolia docs, but with a different slider component

class Range extends Component<Props, State> {
    static defaultProps = {
        refine: minMax => minMax
    };
    state = { currentValues: { min: this.props.min, max: this.props.max } };

    componentWillReceiveProps(sliderState) {
      if (sliderState.canRefine) {
        this.setState({
            currentValues: {
                min: sliderState.currentRefinement.min,
                max: sliderState.currentRefinement.max
            }
        });
        }
    }

    onValuesUpdated = sliderState => {
        this.setState({
            currentValues: {
                min: sliderState[0],
                max: sliderState[1]
            }
        });
    };

    onChange = sliderState => {
        console.log(sliderState);
        if (
            this.props.currentRefinement.min !== sliderState[0] ||
            this.props.currentRefinement.max !== sliderState[1]
        ) {
            this.props.refine({
                min: sliderState[0],
                max: sliderState[1]
            });
        }
    };

    render() {
        const { min, max, currentRefinement } = this.props;
        const { currentValues } = this.state;
        return min !== max
            ? <div>
                  <PackageSelector handleUpdate={this.props.updatePriceAttributeName} />
                  <Slider
                      range
                      defaultValue={[min, max]}
                      min={min}
                      max={max}
                      value={[currentRefinement.min, currentRefinement.max]}
                      onChange={this.onChange}
                      onAfterChange={this.onValuesUpdated}
                  />
                  {/* <Rheostat
                      min={min}
                      max={max}
                      values={[currentRefinement.min, currentRefinement.max]}
                      onChange={this.onChange}
                      onValuesUpdated={this.onValuesUpdated}
                  /> */}
                  <div
                      style={{
                          display: 'flex',
                          justifyContent: 'space-between'
                      }}
                  >
                      <div>
                          {currentValues.min}
                      </div>
                      <div>
                          {currentValues.max}
                      </div>
                  </div>
              </div>
            : null;
    }
}

export default connectRange(Range);

ETA: эта ошибка также возникает, когда я пытаюсь скрыть виджеты мгновенного поиска при первоначальном рендеринге, открывая их после взаимодействия с пользователем (например, в сворачиваемом div). Я предполагаю, что это означает, что проблема не связана напрямую с состоянием, но я еще недостаточно уверен в том, что это такое, чтобы обновить заголовок.