React Material-UI dropdown menu not working inside Paper - reactjs

Question

I've copying the instructions on how to use the Menus in Material-UI docs. I do have the button rendered in my container component that has the Paper component but when I click it, the menu is not showing up. Here's the code:
index.js - Container component
const styles = theme => ({
root: theme.mixins.gutters({
paddingBottom: 16
})
});
class ProvidersPage extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
const { classes, providers } = this.props;
return (
<div>
<Paper className={classes.root} elevation={4}>
<ProviderList providers={providers} />
</Paper>
</div>
);
}
}
ProvidersPage.propTypes = {
classes: PropTypes.object.isRequired,
};
function mapStateToProps(state) {
return {
providers: state.providers
};
}
export default connect(
mapStateToProps
)(withStyles(styles)(ProvidersPage));
ProvidersList.js component
const styles = theme => ({
actions: {
color: theme.palette.text.secondary,
},
title: {
flex: '1',
}
});
class ProviderList extends React.Component {
constructor(props, context) {
super(props, context);
}
render() {
const { classes, providers } = this.props;
return (
<Fragment>
<Toolbar disableGutters>
<div className={classes.title}>
<Typography variant="title">
Providers
</Typography>
</div>
<div className={classes.actions}>
<ProviderMenu />
</div>
</Toolbar>
</Fragment>
);
}
};
ProviderList.propTypes = {
classes: PropTypes.object.isRequired,
providers: PropTypes.array.isRequired
};
export default withStyles(styles)(ProviderList);
ProviderMenu.js - My menu component that has the menus
class ProviderMenu extends React.Component {
state = {
anchorEl: null,
};
handleClick = event => {
this.setState({ anchorEl: event.currentTarget });
};
handleClose = () => {
this.setState({ anchorEl: null });
};
render() {
const { anchorEl } = this.state;
return (
<div>
<Button
aria-owns={anchorEl ? 'simple-menu' : null}
aria-haspopup="true"
onClick={this.handleClick}
>
Open Menu
</Button>
<Menu
id="simple-menu"
anchorEl={anchorEl}
open={Boolean(anchorEl)}
onClose={this.handleClose}
>
<MenuItem onClick={this.handleClose}>Profile</MenuItem>
<MenuItem onClick={this.handleClose}>My account</MenuItem>
<MenuItem onClick={this.handleClose}>Logout</MenuItem>
</Menu>
</div>
);
}
}
export default ProviderMenu;