I am using Material UI's modal to render content. It works great. However, after applying css of transform: 'translate(-50%, -50%)', on my modal, the background dimming look doesnt work anymore. By default it does dim the background behind the modal. Been searching online to see if anyone else has encountered this issue but no one seems to have asked this question before. Please see my code below. Thanks.

Modal

<Modal
       className={classes.modal}
       open={openModal}
       onClose={() => setOpenModal(false)}
       onBackdropClick={() => setOpenModal(false)}>
        <Paper>
         {modalType === 'Buy' && renderBuywModal()}
        </Paper>
    </Modal>

Modal CSS

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