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

return (
      
    );
  }
}

const VirtualRefinementList = connectRefinementList(() => null);
const VirtualSearchBox = connectSearchBox(() => null);
const VirtualMenu = connectMenu(() => null);
const VirtualRange = connectRange(() => null);
const ConnectedRating = connectRange(Rating);

padding-left: ${(props) => props.theme.grid.paddingLeft};

`

const MySearchBox = ({ currentRefinement, refine }) => (
   refine(event.target.value)}
    style={{ width: "100%"}}
  />
)

const ConnectedSearchBox = connectSearchBox(MySearchBox)

function Search() {
  return (
    
       
      
      
    
  )
}

function Post({ hit }) {
  return (
    
      

apiKey="6be0576ff61c053d5f9a3225e2a90f76"
        indexName="bestbuy"
      >
        <div>
          
          
          
          
          
        </div>
      
    );
  }
}

const VirtualSearchBox = connectSearchBox(() =&gt; null);
const VirtualRefinementList = connectRefinementList(() =&gt; null);

const connectAutoComplete = createConnector({
  displayName: 'AutoComplete',

  /*
   We retrieve all the values needed:
   - Current query
   - Hits
   - Facet values (given an array of attributes provided to the component)
   To work properly, you need to use Virtual Widgets for the SearchBox and all the
   facets you want the value of.
   */
  getProvidedProps(props, state, search) {
    const hits = search.results &amp;&amp; search.results.bestbuy
      ? search.results.bestbuy.hits

initialNumToRender={10}
      contentContainerStyle={styles.list}
      keyExtractor={item => `${item.id}`}
      renderItem={({ item }) => }
      ItemSeparatorComponent={() => }
      style={{ maxHeight: 200 }}
    />
  );
};

const Hits = connectInfiniteHits(({ hits, hasMore, refine, onPress, currentUser }) => {
  const data = hits.filter(item => item.id != currentUser.id);
  return 
});

const InstantSearchBox = connectSearchBox(
  ({ refine, currentRefinement, placeholder, style }) => (
    
  ));

class Blocking extends React.Component {
  static navigationOptions = ({ navigation }) => navigationOptions(navigation, 'Blocking');

  state = {
    loading: true,
    blocks: [],
    totalBlocks: null,

/>
      
    );
  }
}

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;

router: Object,
  searchState: Object,
  searchResults: Object,
  currentRefinement: string,
  refine: any => any,
}

class Main extends React.Component {
  render() {
    const {currentRefinement} = this.props

    return currentRefinement ?  : 
  }
}

export default withRouter(connectSearchBox(connectStateResults(Main)))

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

const SearchBox = connectSearchBox(({ currentRefinement, refine }) => (
  <form role="search" novalidate="">
    <button title="Submit your search query" type="submit">
      <svg viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg" height="18" width="18">
        <path d="M14.4085473,12.7893825 L17.8498594,16.2306945 C18.2400429,16.6208781 18.2424894,17.2510442 17.8492424,17.6442911 C17.4587181,18.0348154 16.8197307,18.028993 16.4297323,17.6389945 L13.020013,14.2292753 C11.6473565,15.3368602 9.90112056,16 8,16 C3.581722,16 2.22044605e-15,12.418278 2.22044605e-15,8 C2.22044605e-15,3.581722 3.581722,0 8,0 C12.418278,0 16,3.581722 16,8 C16,9.79620538 15.4080326,11.4541494 14.4085473,12.7893825 L14.4085473,12.7893825 Z M8,14 C11.3137085,14 14,11.3137085 14,8 C14,4.6862915 11.3137085,2 8,2 C4.6862915,2 2,4.6862915 2,8 C2,11.3137085 4.6862915,14 8,14 Z"></path>
      </svg>
    </button>
    <input name="search" autocomplete="off" autocapitalize="off"> refine(e.target.value)}</form>

}}
    />
  );
}

Menu.propTypes = {
  query: PropTypes.string,
  saveQuery: PropTypes.func,
  searchForItems: PropTypes.func,
  refine: PropTypes.func,
  items: PropTypes.array,
  isFromSearch: PropTypes.bool,
};

const ConnectedMenu = connectMenu(Menu);
const VirtualSearchBox = connectSearchBox(() => null);
const VirtualRefinementList = connectRefinementList(() => null);
const VirtualRange = connectRange(() => null);

}}
    />
  );
}

RefinementList.propTypes = {
  query: PropTypes.string,
  saveQuery: PropTypes.func,
  searchForItems: PropTypes.func,
  refine: PropTypes.func,
  items: PropTypes.array,
  isFromSearch: PropTypes.bool,
};

const ConnectedRefinementList = connectRefinementList(RefinementList);
const VirtualSearchBox = connectSearchBox(() => null);
const VirtualRange = connectRange(() => null);
const VirtualMenu = connectMenu(() => null);