() => {
  return (
    <Menu>
      <MenuItem> A Menu Item</MenuItem>
      <MenuItem iconBefore={Check}>A Menu Item With an Icon Before</MenuItem>
      <MenuItem iconAfter={Check}>A Menu Item With an Icon After </MenuItem>
      <MenuItem disabled>A Disabled Menu Item</MenuItem>
      <MenuItem as={Hyperlink} href="https://en.wikipedia.org/wiki/Hyperlink">A Link Menu Item</MenuItem>
      <MenuItem as={Button} variant="tertiary" size="inline">A Button Menu Item</MenuItem>
      <MenuItem as={Form.Checkbox}>A Checkbox Menu Item</MenuItem>
    </Menu>
  );
}

() => {
  return (
    <Form.Group>
      <Form.CheckboxSet
          name="color-two"
          onChange={(e) => console.log(e.target.value)}
          defaultValue={['green']}
        >
        <Form.Label>Which Color?</Form.Label>
        <Menu>
          <MenuItem as={Form.Checkbox} value="red">Red</MenuItem>
          <MenuItem as={Form.Checkbox} value="blue">Blue</MenuItem>
          <MenuItem as={Form.Checkbox} value="green">Green</MenuItem>
          <MenuItem as={Form.Checkbox} value="yellow">Yellow</MenuItem>
        </Menu>
      </Form.CheckboxSet>
    </Form.Group>
  );
}

() => {
  const [isOpen, open, close] = useToggle(false);
  const [target, setTarget] = React.useState(null);
  const [selected, setSelected] = useState('...');

  return (
    <>
      <Badge variant="secondary">I like {selected}</Badge>
      <Button ref={setTarget} variant="primary" size="inline" onClick={open}>Click Me To Pick:</Button>
      <ModalPopup positionRef={target} isOpen={isOpen} onClose={close} style={{
        width: 500, height: 50
      }}>
      <div className="bg-white">
        <Menu>
          <MenuItem as={Button} variant="tertiary" size="inline" onClick= {()=>setSelected('Beans')}>Beans</MenuItem>
          <MenuItem as={Button} variant="tertiary" size="inline" onClick= {()=>setSelected('Greens')}>Greens</MenuItem>
          <MenuItem as={Button} variant="tertiary" size="inline" onClick= {()=>setSelected('Tomatoes')}>Tomatoes</MenuItem>
          <MenuItem as={Button} variant="tertiary" size="inline" onClick= {()=>setSelected('Potatoes')}>Potatoes</MenuItem>
        </Menu>
      </div>
      </ModalPopup>
    </>
  )
}