Using TypesenseInstantSearchAdapter in React App

Kishore Nallan please help me with this

You've to instantiate TypesenseInstantSearchAdapter

import React from 'react';
import algoliasearch from 'algoliasearch/lite';
import {
InstantSearch,
Configure,
Hits,
SearchBox,
DynamicWidgets,
Panel,
Highlight,
RefinementList,
Pagination,
} from 'react-instantsearch-dom';
import PropTypes from 'prop-types';
import './App.css';

const searchClient = algoliasearch(
'latency',
'6be0576ff61c053d5f9a3225e2a90f76'

);

function App() {
return (
<div >
<header className="header">
<h1>Jobs Trail</h1>
</header>

<div className="ais-InstantSearch">
{/* instant_search */}
<InstantSearch searchClient={searchClient} indexName="instant_search">

<Configure hitsPerPage={8} />
<div className="search-panel">
<div className="search-panel__filters">
<DynamicWidgets fallbackWidget={RefinementList}></DynamicWidgets>
</div>

<div >
<SearchBox
className="searchbox"
translations={{
placeholder: '',
}}
/>
<Hits hitComponent={Hit} />

<div className="pagination">
<Pagination />
</div>
</div>
</div>
</InstantSearch>
</div>
</div>
);
}

function Hit(props) {
console.log(props)
return (
<div>
<img src={props.hit.image} align="left" alt={props.hit.name} />
<div className="hit-name">
<Highlight attribute="name" hit={props.hit} />
</div>
<div className="hit-description">
<Highlight attribute="description" hit={props.hit} />
</div>
<div className="hit-price">${props.hit.price}</div>
</div>
);
}

Hit.propTypes = {
hit: PropTypes.object.isRequired,
};

export default App;

i have built a UI as you are describing here, i need react app to show everything

cant i do that without the TypesenseInstantSearchAdapter

Just below the screenshot of the code snippet you posted, the guide says:

> Application ID: can be any string - we'll be replacing this later in the guide

Then it shows you what snippet to add to app.js for the adapter and what existing snippet to replace