Material-ui Grid Responsive Direction Column Width doesn't work

I have read the Material UI Grid List and Flexbox/FlexGrow property, which I understand, and it works correctly if I don't specify a direction. I am trying to set up a Grid with Vertical orientation. Looks like when we assign the align-center property, the width is not what we specify. Example: (style)

const styles = () => ({
    root: {
        flexGrow: 1,
    },

    paper: {
        margin: '10px'
    },

    textField: {
        width: '100%',
        marginTop: '10px',
        marginLeft: '10px'
    },

    gridBorder: { 
        borderColor: 'transparent',
        borderWidth: 'thin',
        borderStyle: 'dotted',
        borderRadius: '12px'
    }
});

Render Method:

<div id='registration'>
    <Grid container spacing={4} direction='column' className={classes.root}>
        <Grid item xl={4} lg={4} xs={12}>
            <TextField required label="Email" id='' className={classes.textField}  onChange={this.handleChange}  />
        </Grid>
        <Grid item xl={4} lg={4} xs={12}>
            <TextField required label="Password" id='' className={classes.textField}  onChange={this.handleChange}  />
        </Grid>
    </Grid>
</div>

It looks like this:. It seems correct, but as soon as I set align-items property, it goes beyond my understanding. So when I inject the following line:

<Grid container spacing={4} direction='column' className={classes.root} alignItems='center'>

It starts looking like this: I read various threads here and none of the thread talked about the direction. Can someone please help me understand this? Why the width reduces as soon as I set it to center? What I am missing?

Update: I am able to fix it with a workaround. But I will really like to be able to align it to center without using this workaround. I added a fake grid before the original grid, to make it look like it is in center. The code is:

<Grid container direction='row'>
    <Grid item xs={1} xl={4} lg={4}>
        <Grid container direction='column' className={[classes.root, 'same-row', 'background-test'].join(' ')}>
            <Grid item>Fake Grid</Grid>
        </Grid>
    </Grid>
    <Grid item  xs={1} xl={4} lg={4}>
        <Grid container direction='column' className={[classes.root, 'same-row'].join(' ')}>
            <Grid item>
                <TextField required label="Email" id='' className={classes.textField}  onChange={this.handleChange}  />
            </Grid>
            <Grid item>
                <TextField required label="Password" id='' className={classes.textField}  onChange={this.handleChange}  />
            </Grid>
        </Grid>            
    </Grid>
</Grid>

and the result is:. But still doesn't answer my question, that why aligning to center will reduce the width.