MUI Collapse component not allowing encapsulated element flex-grow

So I’m a newbie when it comes to React and thought to get familiar with the concepts utilizing mui. I’m creating a nav bar and one of the features is to have a search bar that is initially collapsed and expand once the search icon is pressed. This will also hide the typography element. My issue seems that no matter if I set flexgrow for both collapse or the text input that’s being encapsulated the element doesn’t seem to grow despite the extra space. I wonder if this is a styling issue or whether if transition is incapable of doing this, if it’s a styling issue how do I get the text input to expand the needed space?

Navbar.js

import React, { useState } from "react";
import {
  AppBar,
  Drawer,
  Box,
  IconButton,
  List,
  ListItemButton,
  ListItemText,
  Toolbar,
  TextField,
  Typography,
  Collapse,
} from "@mui/material";
import MenuIcon from "@mui/icons-material/Menu";
import PersonOutlineOutlinedIcon from "@mui/icons-material/PersonOutlineOutlined";
import SearchOutlinedIcon from "@mui/icons-material/SearchOutlined";
import ShoppingBagOutlinedIcon from "@mui/icons-material/ShoppingBagOutlined";
import { createTheme } from "@mui/material";

const Navbar = () => {
  const [drawer, setDrawer] = useState(false);
  const [drawer2, setDrawer2] = useState(false);
  const [clicked, setClicked] = useState(false);
  const theme = createTheme({
    typography: {
      fontFamily: ["Abril Fatface", "cursive"].join(","),
    },
  });
  return (
    <AppBar position="fixed" sx={{ height: 70 }} className="navbar">
      <Toolbar>
        <IconButton onClick={() => setDrawer(!drawer)} className="id">
          <MenuIcon fontSize="large"></MenuIcon>
        </IconButton>

        <Drawer open={drawer} onClose={() => setDrawer(!drawer)}>
          <Box sx={{ width: 400, backgroundColor: "red" }}>
            <List>
              <ListItemButton>
                <ListItemText primary="HI" />
              </ListItemButton>
            </List>
          </Box>
        </Drawer>
        <Collapse orientation="horizontal" in={clicked} timeout={100} unmountOnExit>
          <TextField sx={{ flexGrow: 2 }} />
        </Collapse>
        <Typography
          component="a"
          variant="h4"
          theme={theme}
          className="item"
          sx={{
            color: "black",
            flexGrow: 2,
            textAlign: "center",
            display: clicked ? "none" : "block",
          }}
        >
          APPSTUFF
        </Typography>
        <IconButton className="id">
          <PersonOutlineOutlinedIcon fontSize="large"></PersonOutlineOutlinedIcon>
        </IconButton>
        <IconButton className="id" onClick={() => setClicked(!clicked)}>
          <SearchOutlinedIcon fontSize="large"></SearchOutlinedIcon>
        </IconButton>

        <IconButton className="id" onClick={() => setDrawer2(!drawer2)}>
          <ShoppingBagOutlinedIcon fontSize="large"></ShoppingBagOutlinedIcon>
        </IconButton>
        <Drawer
          open={drawer2}
          onClose={() => setDrawer2(!drawer2)}
          anchor="right"
        >
          <Box sx={{ width: 400, backgroundColor: "red" }}>
            <List>
              <ListItemButton>
                <ListItemText primary="HI" />
              </ListItemButton>
            </List>
          </Box>
        </Drawer>
      </Toolbar>
    </AppBar>
  );
};

export default Navbar;

NavbarStyle.css

.id {
  color: black;
  margin-top: 0.5%;
  display: flex;
  flex-grow: 0;
}
.navbar {
  width: 100vw;
  box-shadow: none;
  background-color: white;
}