this.props.contextValue.store.getState is not a function when adding a custom input

Question

I'm running into an issue with adding my own custon input after following the documentation for Autocomplete.

The error I get is "this.props.contextValue.store.getState is not a function" when adding my CustomSearchBox component. Can anyone advise what I'm doing wrong?

Usage:

<InstantSearch
  searchClient={algoliaClient}
  indexName="plp"
>
   <CustomSearchBox /> // Errors when I add this
    
   <Autocomplete
      searchClient={algoliaClient}
      placeholder="Search products"
      detachedMediaQuery="none"
      openOnFocus
    />

    <RefinementList attribute="DIAMETER" />
    
    <HitWrapper>
        <Hits hitComponent={Hit} />
    </HitWrapper>
</InstantSearch>

Custom search box component

import React from 'react';
import { connectSearchBox } from 'react-instantsearch-dom';

const SearchBox = ({ currentRefinement, isSearchStalled, refine }) => (
    <form noValidate action="" role="search">
        <input
            type="search"
            value={currentRefinement}
            onChange={event => refine(event.currentTarget.value)}
        />
        {isSearchStalled ? 'My search is stalled' : ''}
    </form>
);

const CustomSearchBox = connectSearchBox(SearchBox);

export default CustomSearchBox;

Answer 1

The custom Autocomplete component likely isn't used within an InstantSearch component, which is needed for synchronising the state and requests. It's however impossible to verify without a reproducible example.