reactjs - 如何保留 React InstantSearch 的先前状态

Question

import React, { Component, useState } from 'react';
import algoliasearch from 'algoliasearch/lite';
import {
  InstantSearch,
  Hits,
  SearchBox,
  Highlight,
  connectRefinementList,
} from 'react-instantsearch-dom';
import PropTypes from 'prop-types';
import './App.css';

const searchClient = algoliasearch(
  'test',
  'test'
);

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedCountries: []
    }
  }
  render() {
    const RefinementList = ({
      items,
      isFromSearch,
      refine,
      searchForItems,
      createURL,
    }) => {
      return (
        <ul style={{ listStyle: 'none' }}>
          {
            items &&
            items.map(item => (
              <li key={item.label}>
                <input
                  type="checkbox"
                  checked={item.isRefined}
                  // href={createURL(item.value)}
                  style={{ fontWeight: item.isRefined ? 'bold' : '' }}
                  onChange={event => {
                    // event.preventDefault();
                    refine(item.value);
                  }}
                />
                {isFromSearch ? (
                  <Highlight attribute="label" hit={item} />
                ) : (
                    item.label
                  )}{' '}
                ({item.count})

              </li>
            ))}
        </ul>
      )
    };

    const CustomRefinementList = connectRefinementList(RefinementList);

    return (
      <div className="container">

        <InstantSearch searchClient={searchClient} indexName="parterns">
          <div className="search-panel">
            <div className="search-panel__results">
              <SearchBox
                className="searchbox"
                translations={{
                  placeholder: '',
                }}
                searchAsYouType={false}
              />
              <Hits hitComponent={Hit} />
              <br />
              <br />
              <button onClick={(e) => {
                const that = this;
                e.preventDefault();
                that.setState({
                  selectedCountries: Array.from(new Set([...that.state.selectedCountries, 'India']))
                })
              }
              }
              >
                Select India
              </button>
              <br />
              <button onClick={(e) => {
                const that = this;
                e.preventDefault();
                that.setState({
                  selectedCountries: Array.from(new Set([...that.state.selectedCountries, 'USA']))
                })
              }
              }
              >
                Select Usa
              </button>
              <br />
              <h3>Location</h3>
              <div className="region">
                <CustomRefinementList
                  operator="or"
                  limit={10}
                  defaultRefinement={[]}
                  attribute="region" />
              </div> <br />

                <CustomRefinementList
                  operator="or"
                  limit={this.state.selectedCountries.length}
                  defaultRefinement={this.state.selectedCountries}
                  attribute="country" />
              <br />
              <br />
            </div>
          </div>
        </InstantSearch>
      </div>
    );
  }
}

function Hit(props) {
  return (
    <article onClick={() => alert(props.hit.title)}>
      <h1>
        <Highlight attribute="title" hit={props.hit} />
      </h1>
    </article>
  );
}

Hit.propTypes = {
  hit: PropTypes.object.isRequired,
};

export default App;

问题是所有以前选择的过滤器都被清除了。

例如，最初我单击过滤器 ex: North America 所以我将获得North America的过滤结果。

现在我想要国家过滤器，当点击按钮 ex Select USA时可以看到它

当我单击 Button for ex: Select USA 时，我正在设置状态，因为我想动态渲染它，但问题是先前的状态正在被清除，如何为组件保留先前的状态。