How to use the react-instantsearch-dom.connectRefinementList function in react-instantsearch-dom

Configure,
  Hits,
  connectSearchBox,
  connectRefinementList,
} from 'react-instantsearch-dom';
import Autocomplete from './Autocomplete';
import Hit from './Hit';
import './App.css';

const searchClient = algoliasearch(
  'latency',
  '6be0576ff61c053d5f9a3225e2a90f76'
);

const VirtualSearchBox = connectSearchBox(() => null);
const VirtualRefinementList = connectRefinementList(() => null);

class App extends Component {
  state = {
    query: '',
    categories: [],
  };

  onSuggestionSelected = (_, { suggestion }) => {
    const [
      category,
    ] = suggestion.instant_search.facets.exact_matches.categories;

    this.setState({
      query: suggestion.query,
      categories:
        category && category.value !== 'ALL_CATEGORIES' ? [category.value] : [],

refine(currentRefinement);
      onRefine(currentRefinement);
    }

    if (!equals(defaultRefinement, oldDefaultRefinement)) {
      refine(defaultRefinement);
      onRefine(defaultRefinement);
    }
  }

  render() {
    return null;
  }
}

const VirtualRefinementList = connectRefinementList(FakeRefinementList);

class RawSearch extends Component {
  constructor(props) {
    super(props);
    this.state = { tags: new Set(), owners: new Set() };
  }

  addTag = newTag => this.setState(({ tags }) => ({ tags: tags.add(newTag) }));

  addOwner = newOwner =>
    this.setState(({ owners }) => ({ owners: owners.add(newOwner) }));

  refineTag = newTags => this.setState(() => ({ tags: new Set(newTags) }));

  refineOwner = newOwners =>
    this.setState(() => ({ owners: new Set(newOwners) }));

function MaterialUiClearAllFilters({ items, refine }) {
  return (
     refine(items)}
      label="Clear All"
      primary
      style={{ height: 48, width: '100%' }}
      className="ClearAll"
    />
  );
}

const ConnectedSearchBox = connectSearchBox(MaterialUiSearchBox);

const ConnectedCheckBoxRefinementList = connectRefinementList(
  MaterialUiCheckBoxRefinementList
);

const ConnectedNestedList = connectHierarchicalMenu(MaterialUiNestedList);

const ConnectedSortBy = connectSortBy(MaterialUiSortBy);

const ConnectedHits = connectInfiniteHits(CustomHits);

const ConnectedCurrentRefinements = connectCurrentRefinements(
  MaterialUiClearAllFilters
);

export default withURLSync(App);

const Results = connectSearchBox(() => (
  <article>
    <div id="stats">
      
    </div>
    <hr>
    <div id="hits">
      
    </div>
    <div id="pagination">
      
    </div>
  </article>
));

const RefinementListLinks = connectRefinementList(
  ({ items, refine, createURL }) =&gt; {
    const hitComponents = items.map(item =&gt; (
      <div>
        <a href="{createURL(item.value)}"> {
            e.preventDefault();
            refine(item.value);
          }}
        &gt;
          <span> {item.label}</span>
          <span>{item.count}</span>
        </a>
      </div>
    ));

{heading}
            
            {filters.map((filter: IFilterProps, index: number) => (

);

FeaturedPackage.propTypes = {
  name: PropTypes.string.isRequired,
  owner: PropTypes.shape({
    name: PropTypes.string.isRequired,
    link: PropTypes.string.isRequired,
    avatar: PropTypes.string.isRequired,
  }),
  description: PropTypes.string.isRequired,
  keywords: PropTypes.arrayOf(PropTypes.string).isRequired,
};

const FilterByIds = connectRefinementList(() => null);

const Hits = connectHits(({ hits }) => {
  const half = Math.floor(hits.length / 2);
  const groups = [hits.slice(0, half), hits.slice(half, hits.length)];
  return (
    <div>
      {groups.map((packages, i) =&gt; (
        <div>
          {packages.map(({ name, description, owner, keywords, objectID }) =&gt; (
            </div></div>

padding: 20px 0 40px;

  @media (min-width: 768px) {
    grid-template-columns: repeat(3, 1fr);
  }

  @media (min-width: 1440px) {
    grid-template-columns: repeat(6, 1fr);
  }

  .ant-checkbox-wrapper + .ant-checkbox-wrapper {
    margin: 0;
  }
`;

const RefinementList = connectRefinementList(({ items, refine }) => {
  return (
    
      {items.map(item => (
         refine(item.value)}
          checked={item.isRefined}
          key={item.label.toLowerCase()}
        >
          {item.label} ({item.count})
        
      ))}
    
  );
});

export default RefinementList;

function DatesAndGuest() {
  return (
    <div>
      <div>Dates</div>
      <div>
        <input disabled="" value="10/30/3015">
      </div>
      <div>
        <input disabled="" value="10/30/3015">
      </div>
      <div>
    </div>
  );
}

const RoomType = connectRefinementList(({ items, refine }) =&gt; {
  const sortedItems = items.sort((i1, i2) =&gt; i1.label.localeCompare(i2.label));
  const hitComponents = sortedItems.map(item =&gt; {
    const selectedClassName = item.isRefined
      ? ' ais-refinement-list--item__active'
      : '';
    const itemClassName = `ais-refinement-list--item col-sm-3 ${selectedClassName}`;
    return (
      <div>
        <div>
          <label> {
              e.preventDefault();
              refine(item.value);
            }}
          &gt;</label></div></div></div>