css – Methods to Horizontally Middle a component inside a MUI Typography Element

I’m utilizing the MUI V5 in a react venture and I’m attempting to heart the emblem in an AppBar on further small screens however no mattter what I do nothing appears to be working. The Typography comonent is wrapped inside a ToolBar wrapped inside an AppBar that solely seems on xs screens.
This is my present code.

  <Field sx={{ show: 'flex' }}>
      <CssBaseline />
      <AppBar
        elevation={0}
        place="fastened"
        sx={{
          show: { xs: 'flex', sm: 'none' },
          width: { sm: `calc(100% - ${drawerWidth}px)` },
          ml: { sm: `${drawerWidth}px` },
          bgcolor: 'grey',
        }}
      >
        <Toolbar >
          <IconButton
            shade="inherit"
            aria-label="open drawer"
            edge="begin"
            onClick={handleDrawerToggle}
            sx={{ mr: 2, show: { sm: 'none' } }}
          >
            <MenuIcon />
          </IconButton>

      
            <Typography
              variant="h5"
              noWrap
              part="a"
              href=""
              sx={{
                flexGrow: 1,
                bgcolor: 'crimson',
             
                show: { xs: 'flex', sm: 'none' },
   
                flexGrow: 1,
                fontFamily: 'monospace',
                fontWeight: 700,
                letterSpacing: '.3rem',
                shade: 'inherit',
                textDecoration: 'none',
              }}
            >
              LOGO
            </Typography>
     
        </Toolbar>
      </AppBar>

I’ve throw every little thing I can at it however nothing appears to work. Any assist is extremely appreaciated.