TextField Label to show separately from input - reactjs

Question

Currently using this code of material-ui, the label is showing on the top-left corner of input, but what if I wanted to show the label outside of input separately. I know I can do this using the <InputLabel/> but is there any alternative that can done using <TextField/> only.
<TextField
id="username"
label={<Typography className={classes.label}>Username</Typography>}
fullWidth
margin="normal"
InputLabelProps={{
shrink: true,
}}
InputProps={{
classes: { input: classes.inputs },
}}
name="username"
autoComplete="username"
autoFocus
helperText={touched.username ? errors.username : ''}
error={touched.username && Boolean(errors.username)}
value={values.username}
variant="outlined"
onChange={handleChange}
/>

Answer 1

I used a Grid and InputLabel to be able to make what you want by manually implementing the label and define its position, I have something like this:
<Grid container >
<Grid item xs={12}>
<InputLabel
shrink={false}
htmlFor={"username"}
>
<Typography className={classes.label}>Username</Typography>
</InputLabel>
<TextField
id="username"
fullWidth
margin="normal"
InputLabelProps={{
shrink: true,
}}
InputProps={{
classes: { input: classes.inputs },
}}
name="username"
autoComplete="username"
autoFocus
helperText={touched.username ? errors.username : ''}
error={touched.username && Boolean(errors.username)}
value={values.username}
variant="outlined"
onChange={handleChange}
/>
</Grid>
</Grid>