title: Close material-ui popper when on clickAway
body: <p>I have a material ui popper and I am trying to make it close when I click outside of the popper using 
  ClickAwayListener, but I cannot get this to work. I added the ClickAwayListener around the popper and tried adding it around the content in the popper but nothing seams to work.</p>
  
  <p>I am really new to material-ui so I am a bit lost on how this should be done</p>
  
  <p>This is my code </p>
  
  <pre><code>const Experiences = memo(
  (props) =&gt; {
  const { className } = props;
  const classes = useStyles(props);
  
  const [anchorEl, setAnchorEl] = React.useState(null);
  
  const handleClick = (event) =&gt; {
    setAnchorEl(event.currentTarget);
  };
  
  // const open = Boolean(anchorEl);
  const handleClickAway = () =&gt; {
  setAnchorEl(false);
  };
  
  const experience = (img, title, id, popoverCategory) =&gt; (
    &lt;div
      className="experience"
      aria-describedby={id}
      id={id}
      onClick={handleClick}
      onKeyDown={handleClick}
      role="button"
      tabIndex="0"
    &gt;
      &lt;img
        data-sizes="auto"
        className="lazyload"
        data-src={img}
        alt={title}
      /&gt;
      &lt;div className="experience-title"&gt;
        &lt;Typography
          color="textSecondary"
          variant="subtitle2"
          className="highlight highlight1"
          display="inline"
        &gt;
          { title }
        &lt;/Typography&gt;
      &lt;/div&gt;
  
  
     &lt;ClickAwayListener onClickAway={handleClickAway}&gt;
      &lt;Popper
        id={id}
        open={anchorEl &amp;&amp; anchorEl.id === id}
        anchorEl={anchorEl}
        className={clsx(classes[id])}
        modifiers={{
          flip: {
            enabled: false,
          },
        }}
      &gt;               
        &lt;Button &gt;x&lt;/Button&gt;
        &lt;div className={clsx(classes.paper)}&gt;
          {
            popoverCategory.map(url =&gt; (
  
              &lt;img
                key={id}
                data-sizes="auto"
                className="lazyload"
                src={url}
                alt={title}
              /&gt;
            ))
          }
        &lt;/div&gt;
      &lt;/Popper&gt;
  
        &lt;/ClickAwayListener&gt;
    &lt;/div&gt;
  
  );
  </code></pre>