React Bootstrap Typeahead getInstance() not a function

Question

I have two instances of AsyncTypeahead being rendered in a component by a separate class.

In order to keep the blur function tied to the right field I'm using .getInstance().

So in my constructor I'm using:

   this.typeahead = React.createRef();

Then my props for typahead are as follows:

 <AsyncTypeahead
    id="field1"
    allowNew={false}
    defaultSelected={defaultSelected}
    disabled={false}
    filterBy={(option, props) =>  true}
    inputProps={{
    id: id,
    tabIndex: -1
    }}
    isInvalid={isInError}
    isLoading={isLoading}
    useCache={false}
    labelKey="value"
    minLength={2}
    multiple={multiple}
    onBlur={this.onBlur}
    onChange={onChange}
    onFocus={onFocus}
    onSearch={this.handleSearch}
    options={options}
    placeholder="Field 1 *"
    ref={this.typeahead}
    required={required}
    value={value}
   />


 <AsyncTypeahead
    id="field2"
    allowNew={false}
    defaultSelected={defaultSelected}
    disabled={false}
    filterBy={(option, props) =>  true}
    inputProps={{
    id: id,
    tabIndex: -1
    }}
    isInvalid={isInError}
    isLoading={isLoading}
    useCache={false}
    labelKey="value"
    minLength={2}
    multiple={multiple}
    onBlur={this.onBlur}
    onChange={onChange}
    onFocus={onFocus}
    onSearch={this.handleSearch}
    options={options}
    placeholder="Field 2 *"
    ref={this.typeahead}
    required={required}
    value={value}
   />

My onBlur function is as follows:

 onBlur = () => {
    const instance = this.typeahead.getInstance();
 }

When I tab out/blur my input fields, I get the following console error:

TypeError: n.typeahead.getInstance is not a function

I can use the following (this.typeahead.current) successfully, but then my options from their dropdowns get mixed up (there are two AsyncTypeaheads on the page).

const instance = this.typeahead.current;

Using current does seem to refer to the proper DOM element, in my react dev tools, but the options that show in the dropdown are whatever was blurred last.

So if I choose a selection from field A, then choose a selection from field B, once I click back on field A it shows me the options from field B in the auto-populate.

I can't think of what else to try.

Thanks