title: How can I close a Material UI Modal using an X icon rather than just by clicking outside the modal?
body: <p>I am using the Material UI Modal component in my React app, and it will take up the majority of the screen (about 95%). As a result, I would like to give users a more intuitive way of closing the modal by adding a small "X" icon in the upper right of the modal and allowing that to close it. I am passing the same <code>handleClose</code> function down to this icon as I am to the Modal itself, but the function isn't even getting called when I click the icon. I checked all the props and the function is getting passed down correctly, it just isn't getting evaluated on the CloseIcon component's onClick. </p>
  
  <p>Page.js</p>
  
  <pre><code>const Page = props =&gt; {
  
    const [open, setOpen] = React.useState(false);
  
    const handleOpen = () =&gt; {
      setOpen(true);
    };
  
    const handleClose = () =&gt; {
      console.log('testing')
      setOpen(false);
    };
  
    return (
      &lt;&gt;
        &lt;Button type="button" onClick={handleOpen} buttonText="Add Meal" /&gt;
  
        &lt;ModalContainer
          open={open}
          handleClose={handleClose}
        &gt;
        &lt;/ModalContainer&gt;
      &lt;/&gt;
    )
  };
  </code></pre>
  
  <p>ModalContainer.js</p>
  
  <pre><code>const ModalContainer = ({
    open,
    handleClose,
    ...props
  }) =&gt; {
  
    return (
      &lt;div&gt;
        &lt;Modal
          open={open}
          onClose={handleClose}
        &gt;
          &lt;StyledDialogContent&gt;
            &lt;ModalContent handleClose={handleClose} /&gt;
          &lt;/StyledDialogContent&gt;
  
        &lt;/Modal&gt;
      &lt;/div&gt;
    )
  };
  </code></pre>
  
  <p>ModalContent.js</p>
  
  <pre><code>class ModalContent extends React.Component {
  
    render() {
      const { handleClose } = this.props;
      return (
  
        &lt;Container justify="center" alignItems="center"&gt;
          &lt;ModalBody flexDirection="column" &gt;
            &lt;TopBar justify="flex-end" alignItems="center"&gt;
              &lt;CloseIcon onClick={handleClose} /&gt;
            &lt;/TopBar&gt;
            &lt;BodyContainer&gt;
              &lt;FlexContainer&gt;
                &lt;RecipeCard /&gt;
              &lt;/FlexContainer&gt;
              &lt;FlexContainer&gt;
                &lt;MenuCard
                  title="Custom Food"
                  icon="https://nutriology-storage.s3.amazonaws.com/Custom-Food.svg"
                  link=""
                /&gt;
              &lt;/FlexContainer&gt;
            &lt;/BodyContainer&gt;
  
          &lt;/ModalBody&gt;
        &lt;/Container&gt;
      )
    }
  };
  </code></pre>
  
  <p>CloseIcon.js</p>
  
  <pre><code>const CloseIcon = props =&gt; (
    &lt;Circle justify="center" alignItems="center"&gt;
      &lt;Icon
        viewBox="0 0 26 26"
        xmlns="http://www.w3.org/2000/svg"
        xmlnsXlink="http://www.w3.org/1999/xlink"
      &gt;
        &lt;g id="Style-Guide" stroke="none" strokeWidth="1" fillRule="evenodd"&gt;
          &lt;g
            id="Style-Guide---Elements"
            transform="translate(-198.000000, -5239.000000)"
            strokeWidth="1.5"
          &gt;
            &lt;g
              id="Remove-X-icon-Default"
              transform="translate(199.000000, 5240.000000)"
            &gt;
              &lt;g
                id="Group"
                transform="translate(12.000000, 12.000000) rotate(-315.000000) translate(-12.000000, -12.000000) translate(6.000000, 6.000000)"
                strokeLinecap="round"
              &gt;
                &lt;path d="M0,6 L12,6" id="Line-2"&gt;&lt;/path&gt;
                &lt;path d="M6,0 L6,12" id="Line-2-Copy"&gt;&lt;/path&gt;
              &lt;/g&gt;
            &lt;/g&gt;
          &lt;/g&gt;
        &lt;/g&gt;
      &lt;/Icon&gt;
    &lt;/Circle&gt;
  );
  </code></pre>
  
  <p>How can I make this CloseIcon component actually call the handleClose function and close the modal?</p>
  
  <p>EDIT: I added the CloseIcon.js component here for reference. However, the onClick event is firing correctly -- I tested this by replacing the handleClose function with a simple console.log and it fired appropriately on click. </p>