I am trying to figure something out which is really weird. By default, the background of Material UI's modal dims itself whenever it is visible. While trying to center the modal, I am applying a css translate style - transform: 'translate(-50%, -50%)',. I noticed after applying this style however, after applying this one style, the dimming effect is gone. In addition, when I click outside of the modal, the modal no longer closes. Does anyone know what could be going on? Please see the css rule. Thanks!

  modal: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    transform: 'translate(-50%, -50%)',
    padding: 0,
    border: 'none',
    width: '60%'
  },