Здравствуйте, я пишу проект на Material Design React(Material UI), в

боковой панели у мене должен быть TextField, но когда я нажимаю на него, то боковая панель закрывается.подскажите в чем проблема, пожалуйста!
Вот код боковой панели:
render() {
const classes = this.props;

const sideList = (
<div className={classes.list} className="drawer">
<List>
<div className="toblock"><h1 className="tologo logodrawer">Web ToDoList</h1></div>
<br />
<br />
<hr />
<form className={classes.container} noValidate autoComplete="off">
<h3 className="left pt-3 mb-2">Название задачи</h3>
<TextField
id="filled-email-input"
label="Name"
className={classes.textField}
className="textField"
type="name"
name="name"
autoComplete="name"
margin="normal"
variant="filled"
/>
</form>

{['hello', 'Starred', 'Send email', 'Drafts'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
<List>
{['All mail', 'Trash', 'Spam'].map((text, index) => (
<ListItem button key={text}>
<ListItemIcon>{index % 2 === 0 ? <InboxIcon /> : <MailIcon />}</ListItemIcon>
<ListItemText primary={text} />
</ListItem>
))}
</List>
</div>
);

return (
<div>
<button onClick={this.toggleDrawer('left', true)} className="btn col-sm-4 col-md-4 col-xl-4 plus"><i class="fas fa-plus"></i></button>
<SwipeableDrawer
open={this.state.left}
onClose={this.toggleDrawer('left', false)}
onOpen={this.toggleDrawer('left', true)}
>
<div
tabIndex={0}
role="button"
onClick={this.toggleDrawer('left', false)}
onKeyDown={this.toggleDrawer('left', false)}
>
{sideList}
</div>
</SwipeableDrawer>
</div>
);
}

ухх, бля, обожаю простыни

2 раза className в TextField кстати :)