Not able align items in single when using materialUI grid along with a modal

I am trying to align 3 textfields in a modal in the same line but am not able to do so properly. Either they are going to the next line or are coming as connected without any gap.

Here's the code snippet,

<Grid container spacing={2}>
     <Grid item xs={4}>
                  <Typography sx={{ mt: 1, width: 1 }}>
                    <TextField
                      id="BU Number"
                      label="Business Number"
                      variant="outlined"
                      fullWidth
                    />
                  </Typography>
                </Grid>
                <Grid item xs={4}>
                  <Typography sx={{ mt: 1, width: 1 }}>
                    <TextField
                      id="BU Number"
                      label="Business Number"
                      variant="outlined"
                      fullWidth
                    />
                  </Typography>
                </Grid>
                <Grid item xs={4}>
                  <Typography sx={{ mt: 1, width: 1 }}>
                    <TextField
                      id="BU Number"
                      label="Business Number"
                      variant="outlined"
                      fullWidth
                    />
                  </Typography>
                </Grid>
             </Grid>

What do you think is the best way to get it done?