I have a grid with spacing=2 that contains 2 text fields per row but I noticed that the spacing was only applied to the left of each text field and not at the end to the right of the second text field of each row.

Is there a way to make it so that either the spacing is applied only in between the 2 text fields or it is also applied to the right side of the second text field as well?

    return (
    <form onSubmit={handleSubmit}>
      <Grid
        container
        spacing={2}
        width='60%'
        margin='auto'
        bgcolor='green'
        justifyContent='center'
      >
        <Grid item xs={12} md={6}>
          <TextField
            label='Name'
            name='name'
            value={formState.name}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Phone No'
            name='phoneNo'
            value={formState.phoneNo}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Address'
            name='address'
            value={formState.address}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Job Role'
            name='job.jobRole'
            value={formState.job?.jobRole}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Join Date'
            name='job.joinDate'
            type='date'
            value={formState.job?.joinDate}
            onChange={handleChange}
            fullWidth
            InputLabelProps={{ shrink: true }}
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Resign Date'
            name='job.resignDate'
            type='date'
            value={formState.job?.resignDate}
            onChange={handleChange}
            fullWidth
            InputLabelProps={{ shrink: true }}
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Basic Pay'
            name='job.basicPay'
            type='number'
            value={formState.job?.basicPay}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Conveyance Allowance'
            name='job.conveyanceAllowance'
            type='number'
            value={formState.job?.conveyanceAllowance}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Medical Allowance'
            name='job.medicalAllowance'
            type='number'
            value={formState.job?.medicalAllowance}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} md={6}>
          <TextField
            label='Specialization Allowance'
            name='job.specializationAllowance'
            type='number'
            value={formState.job?.specializationAllowance}
            onChange={handleChange}
            fullWidth
            variant='outlined'
          />
        </Grid>
        <Grid item xs={12} textAlign='center'>
          <Button type='submit' variant='contained' color='primary'>
            Save
          </Button>
        </Grid>
      </Grid>
    </form>
  )

I added a background colour to see the grid

The page without any spacing