example.js

import React from 'react';
import styles from '../styles/components/_tickerSearch.module.scss';

import algoliasearch from 'algoliasearch/lite';
import {
    InstantSearch,
    SearchBox,
    Hits,
    connectAutoComplete,
} from 'react-instantsearch-dom';
const searchClient = algoliasearch(
    KEY_ONE_HERE,
    KEY_TWO_HERE
);

const TickerSearch = ({ hits, currentRefinement, refine }: any) => {
    const renderHits = () => {
        return hits.map((hit: any) => <li key={hit.objectID}>{hit.symbol}</li>);
    };
    return (
        <InstantSearch searchClient={searchClient} indexName='tickers'>
            <ul>
                <li>
                    <input
                        type='search'
                        value={currentRefinement}
                        onChange={(event) => refine(event.currentTarget.value)}
                    />
                </li>
                {hits && hits.length > 0 ? renderHits() : null}
            </ul>
        </InstantSearch>
    );
};

function Hit(props: any) {
    console.log(props);
    return (
        <div>
            <span>
                {props.hit.symbol} - {props.hit.symbol_name}
            </span>
        </div>
    );
}

export default connectAutoComplete(TickerSearch);