React ModalUnstyled not closing when clicking outside of modal - reactjs

Question

I feel like this code used to work fine before, not all of a sudden when clicking outside of the modal the modal does not close.
const StyledModal = styled(ModalUnstyled)`
position: fixed;
z-index: 1300;
right: 0;
bottom: 0;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
`;
const Backdrop = styled('div')`
z-index: -1;
position: fixed;
right: 0;
bottom: 0;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.5);
-webkit-tap-highlight-color: transparent;
`;
function style(props) {
return {
width: 250,
bgcolor: '#ffffff',
color: '#000000',
border: '2px solid #000',
p: 2,
px: 4,
pb: 3,
};
}
const [updateOpen, setUpdateOpen] = React.useState(false);
const handleUpdateOpen = () => setUpdateOpen(true);
const handleUpdateClose = () => setUpdateOpen(false);
<StyledModal
aria-labelledby="unstyled-modal-title"
aria-describedby="unstyled-modal-description"
open={updateOpen}
onClose={handleUpdateClose}
BackdropComponent={Backdrop}
>
<Box sx={style(props)}>
<h5>Enter password</h5>
<form>
<DevicePasswordInput/>
<button className="blue-button" onClick={SendRequest}>GET RECORDS</button>
</form>
<br/>
</Box>
</StyledModal>
Hitting the ESC button on the keyboard does close the modal successfully. Running the handleUpdateClose() function successfully closes the modal also.
Stuck on this, I appreciate any help anyone can offer, thank you!

Answer 1

Not sure why but my code got out of date from the material ui docs...
This code:
BackdropComponent={Backdrop}
Needs to be changed to this:
slots={{ backdrop: Backdrop }}