Material UI Switch onChange handlers are not working - reactjs

Question

I have implemented two material ui switches that are supposed to update properties in the state, however it seems their onChange handlers are not working because the properties are not getting updated(however I am able to flip the switches' controls). The expected behaviour would be when I flip on / off the switch and click save, the properties in the state would change. For reference to the switch api, visit this link - https://material-ui.com/components/switches/#Switches.js
Here is what i have implemented.
export class SwitchNotifications extends React.Component {
constructor(props) {
super(props);
this.state = {
email_notification_enabled: false,
app_notification_enabled: false
};
}
componentDidMount() {
const token = localStorage.getItem("token");
let detail = details(token);
this.props.dispatch(fetchProfile(detail.username));
}
componentWillReceiveProps(nextProps) {
this.setState({
email_notification_enabled: nextProps.profile.email_notification_enabled,
app_notification_enabled: nextProps.profile.app_notification_enabled
});
}
handleChangeEmailNotification = event => {
this.setState({ email_notification_enabled: event.target.checked });
};
handleChangeAppNotification = event => {
this.setState({ app_notification_enabled: event.target.checked });
};
handleSubmit = event => {
event.preventDefault();
const new_profile = {
email_notification_enabled: this.state.email_notification_enabled,
app_notification_enabled: this.state.app_notification_enabled
};
let data = { profile: new_profile };
this.props.dispatch(updateProfileAction(this.state.username, data));
};
render() {
const {
app_notification_enabled,
email_notification_enabled
} = this.state;
return (
<div>
<br />
<div className="containers">
<div className="upload-profile-form edit-upload-course-form">
<img id="member-img" src={image} />
<br />
<Grid container spacing={3}>
<Grid item xs={12}>
<FormControlLabel
control={
<Switch
checked={app_notification_enabled}
onChange={this.handleChangeAppNotification}
value={app_notification_enabled}
inputProps={{ "aria-label": "secondary checkbox" }}
/>
}
label="App notifications"
/>
</Grid>
<Grid item xs={12}>
<FormControlLabel
control={
<Switch
checked={email_notification_enabled}
onChange={this.handleChangeEmailNotification}
value={email_notification_enabled}
color="primary"
inputProps={{ "aria-label": "primary checkbox" }}
/>
}
label="Email notifications"
/>
</Grid>
<Grid item xs={12}>
<button
onClick={this.handleSubmit}
className="submit-profile-button"
>
{" "}
SAVE
</button>
</Grid>
</Grid>
</div>
</div>
</div>
);
}
}