Remove unnecessary empty JSX fragments from various components

src/apps/material-search/MaterialSearch.stories.tsx

@@ -76,7 +76,6 @@ const MaterialSearchHiddenInputs = ({
           />
         </label>
       </div>
-      {}
       <MaterialSearch uniqueIdentifier={uniqueIdentifier} {...args} />
     </div>
   );

src/apps/search-header/search-header.tsx

@@ -326,7 +326,6 @@ const SearchHeader: React.FC = () => {
   return (
     <div className="header__menu-second">
       {/* The downshift combobox uses prop spreading by design */}
-      {}
       <div className="header__menu-search">
         <SearchBar
           q={q}

src/components/autosuggest-category/autosuggest-category.tsx

@@ -25,7 +25,6 @@ const AutosuggestCategory: FC<AutosuggestCategoryProps> = ({
   const t = useText();
   return (
     <>
-      {}
       {/* The downshift combobox works this way by design (line 43) */}
       {categoryData.map((item, incorrectIndex) => {
         // incorrectIndex because in the whole of autosuggest dropdown it is

src/components/autosuggest-material/autosuggest-material.tsx

@@ -31,7 +31,6 @@ const AutosuggestMaterial: React.FC<AutosuggestMaterialProps> = ({
   const t = useText();
   return (
     <>
-      {}
       {/* The downshift combobox works this way by design (line 54) */}
       {materialData.map((item, incorrectIndex) => {
         // incorrectIndex because in the whole of autosuggest dropdown it is
@@ -71,7 +70,6 @@ const AutosuggestMaterial: React.FC<AutosuggestMaterialProps> = ({
             {...getItemProps({ item, index })}
             data-cy={dataCy}
           >
-            {}
             <div className="autosuggest__material-card">
               <Cover
                 animate

src/components/autosuggest-text/autosuggest-text-item.tsx

@@ -33,7 +33,6 @@ const AutosuggestTextItem: React.FC<AutosuggestTextItemProps> = ({
   const t = useText();
   return (
     <>
-      {}
       {/* The downshift combobox works this way by design */}
       <li
         className={classes.textSuggestion}
@@ -43,7 +42,6 @@ const AutosuggestTextItem: React.FC<AutosuggestTextItemProps> = ({
         lang={isoLang}
       >
         <p className="autosuggest__text text-body-medium-regular">
-          {}
           {item.type === SuggestionTypeEnum.Creator
             ? `${item.term} (${t("stringSuggestionAuthorText")})`
             : null}

src/components/autosuggest/autosuggest.tsx

@@ -43,16 +43,13 @@ export const Autosuggest: React.FC<AutosuggestProps> = ({
 
   return (
     <>
-      {}
       {/* The downshift combobox works this way by design */}
       <ul
         className="autosuggest pb-16"
         {...getMenuProps()}
         style={!isOpen ? { display: "none" } : {}}
         data-cy={dataCy}
       >
-        {}
-
         <AutosuggestText
           textData={textData}
           highlightedIndex={highlightedIndex}

src/components/find-on-shelf/FindOnShelfModal.stories.tsx

@@ -105,7 +105,6 @@ const meta: Meta<typeof WrappedFindOnShelfModal> = {
           size="small"
           faustIds={[convertPostIdToFaustId(pid)]}
         />
-        {}
         <WrappedFindOnShelfModal {...modifiedArgs} />
       </>
     );

src/components/material/ReviewInfomedia.tsx

@@ -123,7 +123,6 @@ const ReviewInfomedia: React.FC<ReviewInfomediaProps> = ({
       )}
       {/* We consider infomedia to be a trustworthy source & decided not to
       sanitize the text data that we render as HTML. */}
-      {}
       {infomedia.article?.text && (
         <p
           className="review__body mb-8"

src/components/multiselect/Multiselect.tsx

@@ -129,7 +129,6 @@ const Multiselect: FC<MultiselectProps> = ({
     <>
       {caption && <div className="multiselect__caption">{caption}</div>}
       <div className="multiselect" ref={ref} data-cy={dataCy}>
-        {}
         {/* The downshift combobox works this way by design */}
         <button
           type="button"
@@ -184,7 +183,6 @@ const Multiselect: FC<MultiselectProps> = ({
                   )
                 }
               >
-                {}
                 <span id={`multiselect-label-${downshiftProps.id}`}>
                   {t(item.item)}
                 </span>

src/components/search-bar/search-bar.tsx

@@ -45,11 +45,9 @@ const SearchBar: React.FC<SearchBarProps> = ({
   return (
     <>
       {/* The downshift combobox uses prop spreading by design & associated control is destructured too */}
-      {}
       <label className="hide-visually" {...getLabelProps()}>
         {t("searchHeaderInputLabelText")}
       </label>
-      {}
       <input
         required
         pattern=".*\S+.*"
@@ -72,7 +70,6 @@ const SearchBar: React.FC<SearchBarProps> = ({
           }
         })}
       />
-      {}
       <input
         type="image"
         src={searchIcon}

src/core/utils/modal.tsx

@@ -90,7 +90,6 @@ function Modal({
       <div>
         {/* The backdrop doesn't have a role or keyboard listener because it barely duplicates
           the close button's functionality which possesses both. */}
-        {}
         <div
           className="modal-backdrop"
           style={{
@@ -104,7 +103,6 @@ function Modal({
             close();
           }}
         />
-        {}
         <div
           className={clsx(
             "modal",