I’m getting a console error about custom InfiniteHit components not having unique keys. Anyone else?
import { connectInfiniteHits } from 'react-instantsearch-dom';
import CustomHighlight from './CustomHighlight';
const InfiniteHits = ({ hits, hasMore, refineNext }) => (
<div className="custom-post-hits-container">
{hits.map((hit) => (
<li key={hit.ID}>
<article className="alg-search-results-item" id={hit.ID+'article'}>
<h3 className="alg-entry-title">
<a href={hit.slug} rel="bookmark">
<CustomHighlight hit={hit} attribute="post_title" />
</a>
</h3>
<p className="alg-entry-summary">
{hit._yoast_wpseo_metadesc.replace(
/Learn more(.*)today\!|¡Obtenga(.*)hoy\!/,
''
)}
</p>
</article>
</li>
))}
<div className="show-more-container">
<button
className="btn btn-primary alg-show-more-btn"
disabled={!hasMore}
onClick={refineNext}
>
Show more
</button>
</div>
</div>
);
const CustomPostInfiniteHits = connectInfiniteHits(InfiniteHits);
export default CustomPostInfiniteHits;