[docs] fix fade modal demo (mui#46271)

Co-authored-by: Brijesh Bittu <brijesh42@gmail.com>

Author: 2 people

docs/data/joy/components/modal/FadeModalDialog.js

@@ -8,14 +8,17 @@ import DialogContent from '@mui/joy/DialogContent';
 
 export default function FadeModalDialog() {
   const [open, setOpen] = React.useState(false);
+  const nodeRef = React.useRef(null);
+
   return (
     <React.Fragment>
       <Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
         Open modal
       </Button>
-      <Transition in={open} timeout={400}>
+      <Transition nodeRef={nodeRef} in={open} timeout={400}>
         {(state) => (
           <Modal
+            ref={nodeRef}
             keepMounted
             open={!['exited', 'exiting'].includes(state)}
             onClose={() => setOpen(false)}

docs/data/joy/components/modal/FadeModalDialog.tsx

@@ -8,14 +8,17 @@ import DialogContent from '@mui/joy/DialogContent';
 
 export default function FadeModalDialog() {
   const [open, setOpen] = React.useState<boolean>(false);
+  const nodeRef = React.useRef(null);
+
   return (
     <React.Fragment>
       <Button variant="outlined" color="neutral" onClick={() => setOpen(true)}>
         Open modal
       </Button>
-      <Transition in={open} timeout={400}>
+      <Transition nodeRef={nodeRef} in={open} timeout={400}>
         {(state: string) => (
           <Modal
+            ref={nodeRef}
             keepMounted
             open={!['exited', 'exiting'].includes(state)}
             onClose={() => setOpen(false)}