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

import { connectHits, createConnector, InstantSearch } from "react-instantsearch-dom";

const searchClient = algoliasearch("Q9QS39IFO0", "153e21a16f649c7f9ec28185683415cf");

export class Search extends React.Component<{}, {}> {
  public render() {
    return (
      
        
      
    );
  }
}

// Mostly magic to me: https://www.algolia.com/doc/guides/building-search-ui/widgets/create-your-own-widgets/react/
const connectWithQuery = createConnector({
  displayName: "WidgetWithQuery",
  getProvidedProps(props, searchState) {
    // Since the `attributeForMyQuery` searchState entry isn't
    // necessarily defined, we need to default its value.
    const currentRefinement = searchState.attributeForMyQuery || "";

    // Connect the underlying component with the `currentRefinement`
    return { currentRefinement };
  },
  refine(props, searchState, nextRefinement) {
    // When the underlying component calls its `refine` prop,
    // we update the searchState with the provided refinement.
    return {
      // `searchState` represents the search state of *all* widgets. We need to extend it
      // instead of replacing it, otherwise other widgets will lose their respective state.
      ...searchState,

) : (
        <div style="{{">
      )}
    </div>
    <div>
      {window.i18n.search_by_algolia}
      {' - '}
      <a href="https://discourse.algolia.com/t/2016-algolia-community-gift-yarn-package-search/319">
        {window.i18n.search_by_read_more}
      </a>
      .
    </div>
  
);

const connectResults = createConnector({
  displayName: 'ConnectResults',
  getProvidedProps(props, searchState, searchResults) {
    const pagination = searchResults.results
      ? searchResults.results.nbPages &gt; 1
      : false;
    const noResults = searchResults.results
      ? searchResults.results.nbHits === 0
      : false;
    return { query: searchState.query, noResults, pagination };
  },
});

export const Results = connectResults(
  ({ noResults, query, pagination, onTagClick, onOwnerClick }) =&gt; {
    if (isEmpty(query)) {
      body.classList.remove('searching');