title: Display a modal from Material UI dropdown selection
body: <p>The goal is to open a delete option modal from a material ui dropdown menu.</p>
  <p>The first step towards that is understanding how to simply select an item from a dropdown, and then trigger some form of action (opening the modal) depending on which item is selected.</p>
  <p>The <a href="https://mui.com/components/menus/" rel="nofollow noreferrer">material UI docs</a> all seem to offer samples in which <code>onClick</code> simply handles the closing of the menu.  It seems there are rare examples of selecting something from a dropdown and then opening/doing things from there?</p>
  <p>I'm having trouble seeing where I would insert the logic/event handling to handle 'if the user selects option x, open modal regarding option x' within the context of a material ui menu.</p>
  <p>Here's my code to show the rabbit hole I'm down currently:</p>
  <pre><code>import * as React from 'react';
  import IconButton from '@mui/material/IconButton';
  import Menu from '@mui/material/Menu';
  import MenuItem from '@mui/material/MenuItem';
  import { useState } from 'react'
  import Select from '@mui/material/Select';
  
  interface IProps extends Omit&lt;unknown, 'children'&gt; {
      children: any;
      options: string[];
  }
  
  const ITEM_HEIGHT = 48;
  
  const DropdownMenu = ({ children, options }: IProps) =&gt; {
      const [anchorEl, setAnchorEl] = React.useState&lt;null | HTMLElement&gt;(null);
      const open = Boolean(anchorEl);
      const handleClick = (event: React.MouseEvent&lt;HTMLElement&gt;) =&gt; {
          setAnchorEl(event.currentTarget);
      };
  
      const [value, setValue] = useState('');
      const handleChange = (event: any) =&gt; {
          setValue(event.target.value);
          console.log(value)
      };
  
      const handleClose = () =&gt; {
          setAnchorEl(null);
      };
  
      return (
          &lt;div&gt;
              &lt;IconButton
                  aria-label=&quot;more&quot;
                  id=&quot;long-button&quot;
                  aria-controls=&quot;long-menu&quot;
                  aria-expanded={open ? 'true' : undefined}
                  aria-haspopup=&quot;true&quot;
                  onClick={handleClick}
              &gt;
                  {children}
              &lt;/IconButton&gt;
              &lt;Menu
                  id=&quot;long-menu&quot;
                  MenuListProps={{
                      'aria-labelledby': 'long-button'
                  }}
                  anchorEl={anchorEl}
                  open={open}
                  onClose={handleClose}
                  PaperProps={{
                      style: {
                          maxHeight: ITEM_HEIGHT * 4.5,
                          width: '20ch'
                      }
                  }}
              &gt;
                  &lt;Select value={value} onChange={handleChange}&gt;
                      {options.map(option =&gt; (
                          &lt;MenuItem key={option} onClick={handleClose} &gt;
                              {option}
                          &lt;/MenuItem&gt;
                      ))}
                  &lt;/Select&gt;
              &lt;/Menu&gt;
          &lt;/div&gt;
      );
  };
  
  export default DropdownMenu;
  </code></pre>
  <p>How would I use the dropdown to trigger the invocation of a Modal component based on a string value?</p>