Styled Input Base - Copy this React, Mui Component to your project

<StyledAppBar position="fixed"> <Toolbar> <IconButton onClick={handleHome} edge="start" color="inherit" aria-label="home"> <FaHome /> </IconButton> <Typography variant="h6" component="div" fontStyle="italic" > Home </Typography> <FlexGrow /> <Search sx={{ display: "flex", width: "50%", alignItems: "center" }}> <SearchIconWrapper> <SearchIcon /> </SearchIconWrapper> <StyledInputBase placeholder="Search…" inputProps={{ 'aria-label': 'search' }} /> </Search> <UserInfo onClick={handleProfileMenuOpen}> <Typography variant="subtitle1" style={{ marginRight: 10 }}> {(token) && isUser.name} </Typography> <AccountCircle /> </UserInfo> <Menu anchorEl={anchorEl} open={Boolean(anchorEl)} onClose={handleMenuClose} > <MenuItem onClick={navigataToProfile}> <ManageAccountsIcon style={{ marginRight: 10 }} /> Profile </MenuItem> <MenuItem onClick={navigataToCart}> <Badge badgeContent={cartItems} color="primary"> <FaShoppingCart style={{ marginRight: 10 }} /> </Badge> My Cart </MenuItem> <MenuItem onClick={handleLogout}> <FaSignOutAlt style={{ marginRight: 10 }} /> Logout </MenuItem> </Menu> </Toolbar> </StyledAppBar>