Material-UI: Add an icon to TextField

This is a project for monitoring employees, and the first interface in this project is the Sign Up interface, and it is located inside the Form Text Field, and I want to put icon to the left of the placeholder in the TextField. I tried more than one way, but my attempts failed. How can I do that? And within this file, I added the form, leaving nothing but adding an icon SignUp.tsx:

import { makeStyles, createStyles, Theme } from "@material-ui/core/styles";
import Grid from "@material-ui/core/Grid";
import Paper from "@material-ui/core/Paper";
import Typography from "@material-ui/core/Typography";
import TextField from "@material-ui/core/TextField";
import Box from "@material-ui/core/Box";
import Button from "@material-ui/core/Button"
import DraftsOutlinedIcon from '@material-ui/icons/DraftsOutlined';

const useStyles = makeStyles((theme: Theme) =>
  createStyles({
    root: {
      flexGrow: 1,
      width: "100%",
      marginTop: "10rem",
    },
    paper: {
      margin: "auto",
      padding: "2rem",
      maxWidth: "30%",
      paddingLeft: "4rem",
      paddingRight: "4rem",
    },

    textField: {
      width: "100%",
      paddingTop: "0.5rem",
    },

    title: {
      fontSize: "1.5rem",
    }, 

    button:{
      height: "3.8rem",
      backgroundColor: "#5f48ea",
      color: "#fff",
      textTransform: "capitalize",
      fontSize: "1.3rem",
      marginTop: "0.8rem",
      marginBottom: "2.5rem"
    }
  })
);

export default function SignUp() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <Paper className={classes.paper}>
        <Grid container direction={"column"}>
          <Grid item>
            <Typography component="div">
              <Box textAlign="center" className={classes.title} m={1}>
                <h1>Let's go!</h1>
              </Box>
            </Typography>
          </Grid>
          <Grid md={12} container direction={"column"} spacing={4}>
            <Grid item md={12} xs={12}>
              <label>Full Name</label>
              <TextField
                className={classes.textField}
                placeholder="George Dawod"
                variant="outlined"
              />
            </Grid>
            <Grid item xs={12} md={12}  style={{position: 'relative', display: 'inline-block'}}>
              <label>Email</label>
              
              <TextField
                className={classes.textField}
                placeholder="example@site.com"
                variant="outlined"
              />
            </Grid>
            <Grid item xs={12} md={12}>
              <label>Choose Password</label>
              <TextField
                className={classes.textField}
                placeholder="password"
                variant="outlined"
              />
            </Grid>
            <Grid item>
              <Button className={ classes.button }  fullWidth variant="contained"> 
                play with Slark
              </Button>
            </Grid>
          </Grid>
        </Grid>
      </Paper>
    </div>
  );
}