How to use the react-instantsearch/connectors.connectCurrentRefinements function in react-instantsearch

);
          }}
          dropdownStyle={{
            width: 200,
            height: 110,
          }}
          textStyle={{ fontSize: 15 }}
        />
        {icon}
      
    );
  }
);

const Filters = connectCurrentRefinements(
  ({ items, searchState, onSearchStateChange }) => (
    <button>
        /* eslint-disable new-cap */
        Actions.Filters({
          searchState,
          onSearchStateChange,
        })
      }
      /* eslint-enable new-cap */
      title={`Filters (${items.length})`}
      color="#162331"
    /&gt;
  )
);
const VirtualRange = connectRange(() =&gt; null);</button>

keyboardShouldPersistTaps={'always'}
          style={styles.mainContainer}
        />
      
    );
  }
}

Refinements.propTypes = {
  searchState: PropTypes.object.isRequired,
  refine: PropTypes.func.isRequired,
  onSearchStateChange: PropTypes.func.isRequired,
  items: PropTypes.array.isRequired,
};

const ConnectedRefinements = connectCurrentRefinements(Refinements);
const VirtualRefinementList = connectRefinementList(() => null);
const VirtualSearchBox = connectSearchBox(() => null);
const VirtualMenu = connectMenu(() => null);
const VirtualRange = connectRange(() => null);

export default Filters;

import React from "react";
import { connectCurrentRefinements } from "react-instantsearch/connectors";

const ClearAll = connectCurrentRefinements(
  ({ items, refine }) =>
    items.length > 0 && (
      <button> refine(items)}
        className="tracking-tight mb-2 float-right text-orange-dark"&gt;
        Clear filters
      </button>
    )
);

export default ClearAll;