No overlay with Drawer

I’m trying to use the Drawer component, it works, but without the Overlay.

I’m using it in a very simple component.

class AppMenu extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      isOpen: true,
    };

    this.handleCloseDrawer = this.handleCloseDrawer.bind(this);
  }

  handleCloseDrawer() {
    this.setState({
      isOpen: false,
    });
  }

  render() {
    const { isOpen } = this.state;

    return (
      <div>
        <Drawer
          anchor="left"
          open={this.state.isOpen}
          onClose={this.handleCloseDrawer}
          variant="persistent"
        >
          <div
            tabIndex={0}
            role="button"
            onClick={this.handleCloseDrawer}
            onKeyDown={this.handleCloseDrawer}
          >
            <MenuItem>Menu Item</MenuItem>
          </div>
        </Drawer>
      </div>
    );
  }
}

• [ x ] I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior

The Drawer, when open, should render a div tag to display an overlay which can be clicked to close the Drawer.

Current Behavior

The menu is created, without an overlay, so I can’t close the menu by clicking outside of it.

Steps to Reproduce (for bugs)

Very simple usage: https://codesandbox.io/s/n51myz595l

Context

I’m trying to have a Drawer like the demos.

Your Environment

The bug are here and on my Mac High Sierra with Google chome: https://codesandbox.io/s/n51myz595l

[leMaik]

You are using variant="persistent", which doesn’t have an overlay because it is persistent. If you want a temporary drawer with an overlay that can close, use variant="temporary" (the default value for variant).

[mbrookes]

You’re not seeing an overlay because you’re using a persistent draw. Try removing the variant prop.