I tried to center the grid items of material UI but not able to achieve and document says you can make use of justifyItems and alignItems props but i could not achieve by using this one. Any help?

Items are not centered

i tried below sample but not sure what’s wrong here the grid items are started from the beginning itself

`const HeaderCopy: React.FC = () => {
    const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);

    const handleMenu = (event: React.MouseEvent<HTMLElement>) => {
        setAnchorEl(event.currentTarget);
    };

    const handleClose = () => {
        setAnchorEl(null);
    };
    return (
        <AppBar>
            <Grid container  alignItems="center" justifyContent="center">
                <Grid item xs={3}>
                    <img src="/public/logo.png" />
                </Grid>
                <Grid item xs={6}>
                    <Typography component="div">ALl IS WELL</Typography>
                </Grid>
                <Grid item xs={3}>
                    <IconButton
                        size="large"
                        aria-label="account of current user"
                        aria-controls="menu-appbar"
                        aria-haspopup="true"
                        onClick={handleMenu}
                        color="inherit"
                    >
                        <AccountCircle />
                    </IconButton>
                    <Menu
                        id="menu-appbar"
                        anchorEl={anchorEl}
                        anchorOrigin={{
                            vertical: "bottom",
                            horizontal: "right",
                        }}
                        keepMounted
                        transformOrigin={{
                            vertical: "top",
                            horizontal: "right",
                        }}
                        open={Boolean(anchorEl)}
                        onClose={handleClose}
                    >
                        <MenuItem>Home</MenuItem>
                        <MenuItem>My Profile</MenuItem>
                        <MenuItem>My Settings</MenuItem>
                        <MenuItem>Logout</MenuItem>
                    </Menu>
                </Grid>
            </Grid>
        </AppBar>
    );
}`