Modal: prevent backdrop to stay open when 'open' is flickering

This should address mui#12831.

After following the comments in the above issue, I indeed noticed that `onExited` was not called. However, I've also noticed that `onEntered` was not called either. This is because the transition is not even rendered.

To solve this, I have added a flag that tells if the transition was entered. If this is not the case, we can remove the modal from the DOM when open is false.

packages/material-ui/src/Modal/Modal.js

@@ -86,6 +86,7 @@ const Modal = React.forwardRef(function Modal(props, ref) {
 
   const theme = useTheme();
   const [exited, setExited] = React.useState(!open);
+  const [hasEnteredTransition, setEnteredTransition] = React.useState(false);
   const modal = React.useRef({});
   const mountNodeRef = React.useRef(null);
   const modalRef = React.useRef(null);
@@ -153,12 +154,13 @@ const Modal = React.forwardRef(function Modal(props, ref) {
     [manager],
   );
 
-  if (!keepMounted && !open && (!hasTransition || exited)) {
+  if (!keepMounted && !open && (!hasTransition || exited || !hasEnteredTransition)) {
     return null;
   }
 
   const handleEnter = () => {
     setExited(false);
+    setEnteredTransition(true);
   };
 
   const handleExited = () => {