Ocultar menu al hacer click fuera de el en React

import * as React from "react";
import Radium from "radium";
import {
  Button,
  Icon,
  Popup,
  Container,
  Divider,
  Grid,
  GridColumn,
  List
} from "semantic-ui-react";
import "./Menu.css";
import { Checkbox } from "semantic-ui-react";

export interface Props {}

interface State {
  isOpen: boolean;
}
class MenuFilters extends React.Component<Props, State> {
  constructor(props: Props) {
    super(props);
  }

  render() {
    const menuButton = (
      <Button
        size="medium"
        onClick={() => {
          this.setState({ isOpen: !this.state.isOpen });
        }}
        style={{
          color: "#424242",
          border: "2px solid #424242",
          backgroundColor: "transparent",
          paddingLeft: "10px",
          paddingRight: "10px",
          opacity: "0.4"
        }}
      >
        <strong>FILTROS</strong>
        {this.state.isOpen ? (
          <Icon name="angle up" style={{ marginLeft: "10px" }} />
        ) : (
          <Icon name="angle down" style={{ marginLeft: "10px" }} />
        )}
      </Button>
    );

    const menuContent = (
      <div style={{ width: "220px" }}>
        <List>
        <div className="row">
      
      <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        
          <List.Item >
          <div className="row">
          <div className="col-xs-10 col-sm-10 col-md-10 col-lg-10">
              <strong>Ocultar expirados</strong>
            </div>
          <div className="col-xs-2 col-sm-2 col-md-2 col-lg-2">
              <Checkbox style={style.checkbox} />
            </div>
            </div>
          </List.Item>
         
          </div>

          <div className="col-xs-12 col-sm-12 col-md-12 col-lg-12">
        
        <List.Item >
        <div className="row">
        <div className="col-xs-10 col-sm-10 col-md-10 col-lg-10">
            <strong>Esconder chollos locales</strong>
          </div>
        <div className="col-xs-2 col-sm-2 col-md-2 col-lg-2">
            <Checkbox style={style.checkbox} />
          </div>
          </div>
        </List.Item>
       
        </div>    
          </div> 
        </List>
      </div>
    );

    return (
      <div>
        <Popup
          basic
          trigger={menuButton}
          content={menuContent}
          on="click"
          open={this.state.isOpen}
          position="bottom right"
        />
      </div>
    );
  }
}

const style = {
  checkbox: {
    top: "2px",
    marginLeft: "-17px"
  }
};

export default Radium(MenuFilters);