Unable to enter in textboxes in login page

[kaushikappani]

`export class login extends Component {
constructor(){
super();
this.state={
email: '',
password:'',
loading: false,
errors:{}
}
}
handleSubmit = (event)=>{
event.preventDefault();
this.setState({
loading: true
});
const userData = {
email:this.state.email,
password:this.state.password
}
axios.post('/login',userData)
.then(res=>{
console.log(res.data);
this.setState({
loading:false
});
this.props.history.push('/')
})
}
handleChange = (event) => {
this.setState({
[event.target.name]: event.target.value
});
};

render(){
    const {classes}=this.props;
    return(
        <Grid container className={classes.form}>
            <Grid item sm={12} xs={12}>
            <Typography variant='h2' className={classes.pageTitle}>
            Login</Typography>
            <form noValidate onSubmit={this.handleSubmit}>
            <TextField className={classes.text} id="email" type='email' label="Email" variant="outlined" value={this.state.email} onChange={this.handleChange} fullWidth/><br/>
            <TextField className={classes.text} id="password" type='password'label="Password" variant="outlined" value={this.state.password} onChange={this.handleChange} fullWidth/><br/>
            <Button type='submit' variant="contained" color="primary" className={classes.button}>Login</Button>
            </form>
            </Grid>
        </Grid>
    );
}

}
`