[NOCI] Bugfix: Rendering More than Expected Number of Items (#231)

* Update key assignment to section item

* Update key for custom section

---------

Co-authored-by: Evan Yan <[email protected]>

Author: evanyan13

src/components/Autocomplete/SectionItem/SectionItem.tsx

@@ -9,7 +9,6 @@ import SearchSuggestionItem from './SearchSuggestionItem';
 export interface SectionItemProps {
   item: Item;
   children?: ReactNode;
-  key?: string;
   displaySearchTermHighlights?: boolean;
 }
 

src/components/Autocomplete/SectionItemsList/SectionItemsList.tsx

@@ -14,7 +14,6 @@ export type RenderSectionItemsList = (renderResultsArguments: {
 type SectionItemsListProps = {
   section: Section;
   children?: RenderSectionItemsList;
-  key?: string;
 };
 
 // eslint-disable-next-line func-names
@@ -70,14 +69,14 @@ const DefaultRenderSectionItemsList: RenderSectionItemsList = function ({ sectio
                 renderItem={section.renderItem}
                 item={item}
                 query={query}
-                key={item.id}
+                key={item?.data?.variation_id || item?.id}
               />
             );
           }
           return (
             <SectionItem
               item={item}
-              key={item?.id}
+              key={item?.data?.variation_id || item?.id}
               displaySearchTermHighlights={section.displaySearchTermHighlights}
             />
           );