Reduce page chunk size by loading the component only that is required

Question

I have a NAV header component called GlobalHeaderV2.tsx which has a Search component. Currently on page load both the components are being rendered increasing the page size.

Search Component renders the icon (Pic 1) and on click the auto complete suggestion (Pic 2). Icon needs to render on initial page load but the auto complete is not required until the user interaction.

Please guide me on how i can address this. Should i separate the icon and auto complete into its own component and then lazy load the auto complete?

Inside SearchComponentV2.tsx file

export default function SearchComponentV2(props) {
return (
    <ThemeProvider theme={theme}>
      {(!desktopSearchComponent) && <div className={classes.searchIconWidth} style={{ display: 'inline-flex'}}>
        <ListItem aria-label='Search directv.com' onClick={toggleDesktopSearch} button={true} className={`${classes.focusonbtn}`}>
          <ListItemIcon className={`${classes.collapsebtn}`} onClick={toggleDesktopSearch}>
            <span style={{display: 'inline-flex'}}>
              {setSVGLogoAsset(isLightTheme?icons.SearchDarkIcon:icons.SearchIcon,classes.iconSize)}
            </span>
          </ListItemIcon>
        </ListItem>
        <Drawer anchor={'right'} open={drawerOpen} 
          style = {{zIndex:3000}}
          PaperProps={{
            style: {
              alignItems: isMobile?'normal':'center',
              width: isTablet?'100%':'50%',
              paddingLeft: '20px',
              paddingTop:'15px',
              paddingRight:'10px',
              height:'100%'
            }
          }}>
          {renderSearchComponent()} //Auto Complete Component
        </Drawer>
      </div>}
    </ThemeProvider>
}

Inside GlobalHeaderV2.tsx file

import SearchComponentV2 from "../search-app/src/SearchComponentV2";

const createLayout = (data: any, logoData?: any, langSupport?: any) => {
      !data?.left?.length && raiseError('LAYOUT-LEFT-CREATELAYOUT');
      !data?.right?.length && raiseError('LAYOUT-RIGHT-CREATELAYOUT');
      return (!props.skinnyGnav && (
        <List
          component="nav"
          role="navigation"
          aria-label="Main Menu"
          data-testid={`header-main-list_${genUniqueUUid(10)}`}
          className={`${classes.inlineFlex} ${classes.desktop}`} style={{ display: 'flex', alignItems: 'center', width: '100%', height: '100%', paddingBottom: (navData?.options?.styles?.menuContainerPadBottom ? navData?.options?.styles?.menuContainerPadBottom : null) }}
        >
          <div className={`${classes.desktop} ${classes.marRt12} `} style={{ display: 'inline-flex', alignItems: 'center' }} >

            {data.right != undefined && data.right.length && createLeftRightTopMenus(data.right, 'right')}
            {(navData.options && navData.options.showSearch) ?
              <div className={classes.searchBarStyles}>
                <div style={{ display: 'inline-flex', width: '95%', fontFamily: 'PFDinReg', justifyContent: 'flex-end' }}>
                <SearchComponentV2 isLightTheme={isLightTheme} caps={navData.options.topLevelCaps} drawerIsOpen={drawerIsOpen} updateSearchIsOpen={updateSearchIsOpen} />
                </div>
              </div>
              : <div className={classes.searchBarStyles} />
            }
          </div>
          {(navData.options && navData.options.enableLangSupport) ? showLangLinks(langSupport) : ''}
        </List>)
      );
    }
————— Return ——————————————

return (
   <React.Fragment>
     <Toolbar className={`${isLightTheme ? classes.bgLight : classes.bgDark}` + ' ' + classes.mainMenuBarPadding + ' ' + classes.root + classes.root + ' ' + classes.toolBar}>
                              {BuildIcon(isLightTheme ? navData.lightLogo : navData.logo, ((navData.options && navData.options.overrideMobileMenu && navData.options.alternateSVG)) ? (isLightTheme ? navData.options.alternateSVGLight : navData.options.alternateSVG) : null)}
                              {!isLefOrRight ?
                                TopLevelMenu((props && props.isAuth) ? navData.auth : (navData.recog && props.recognised ? navData.recog : navData.unauth))
                                :
                                createLayout((props && props.isAuth) ? navData.auth : (navData.recog && props.recognised ? navData.recog : navData.unauth),
                                  navData.logo, navData.options && navData.options.enableLangSupport ? langSupport : null)}
                            </Toolbar>
    
     </React.Fragment>
    )

On click of Icon the drawer opens