Me gustaría cambiar la distancia de los componentes (campo de texto y botón) para que no se superpongan, pero hay un espacio entre ellos y no sé cómo hacerlo.

Me gustaría agregar al menos 1-2 espacios entre el texto del campo y el botón

Así es como se ve:

código:

 import * as React from 'react'; import TextField from '@mui/material/TextField'; import { Box, Paper, Button} from '@mui/material'; export default function Student() { const paperStyle={padding:'50px 20px', width:600, margin:"20px auto"} const[name, setName]=React.useState('') const[address, setAddress]=React.useState('') return ( <Box component="form" sx={{ '& > :not(style)': { m: 1, }, }} noValidate autoComplete="off" > <Paper elevation={3} style={paperStyle}> <h1 style={{color:"blue"}}><u>text</u></h1> <TextField id="outlined-basic" label="Name" variant="outlined" fullWidth value={name} onChange={(e)=>setName(e.target.value)} /> <TextField id="outlined-basic" label="Address" variant="outlined" fullWidth value={address} onChange={(e)=>setAddress(e.target.value)} /> <Button variant="outlined">Primary</Button> {name} {address} </Paper> </Box> ); }