Exit Property not working in Framer Motion with react js

Question

Exit Property not working in Framer Motion with react js Everything is going well but exit motion is not working i am trying this for more than a week please help me!

Exit Property not working in Framer Motion with react js Everything is going well but exit motion is not working i am trying this for more than a week please help me!I have installed latest version of framer motion "framer-motion": "^10.10.0", But also no response on exit property.

import React ,{useEffect , useState ,useRef } from 'react';
import { Box, Grid,CardContent ,CardActionArea,CardMedia, Typography, styled, List, ListItem, createStyles, Card, TextField, Link, Button, TextareaAutosize } from '@mui/material';
import {motion , useScroll,AnimatePresence } from 'framer-motion'
import '../Style/app.css'
import axios from 'axios' 
import CancelIcon from '@mui/icons-material/Cancel';



 export default function Carosel({handleClose}) {



  const [post,setpost] = useState([]);

  const getload = async()=>{

  const response = await axios.get('http://127.0.0.1:8000/media/carosel');
  console.log(response. Data);
  console.log(post);
  setpost(response.data);
  console.log(post);

}


  useEffect(()=>{
      getload();
  },[])


const dropIn ={

hidden:{
    y:"100vh",
    opacity:0,
},

visible:{
    y:"0",
    opacity:1,
    transition:{
        duration:1.5,
        type:"spring",
        damping:35,
        stiffness:100,
    },
},

exit:{
    y:"-100vh",
    opacity:0,
    transition:{
        duration:1.5,
        type:"spring",
        damping:35,
        stiffness:100,
    },
},
};



  
return (

<>

  <AnimatePresence mode='wait'>

        <Box
            component={motion.div}
            variants={dropIn}
            initial="hidden"
            animate="visible"
            exit="exit"
            onClick={(e)=> e.stopPropagation()}
        >

            <Button>
                    <CancelIcon />
            </Button>

          {post. Map(elem)=>{
              return(
                <Box>
                  <Box
                    component='img'
                    width="100%"
                    height="100%"
                    src={elem.Image}
                    >
                  </Box>
                  <Typography>
                    {elem.Title}
                  </Typography>
                </Box>

              )
            })
          }
        </Box>
  </AnimatePresence>    
    </>
  )
}

Answer 1

From the docs:

Direct children must each have a unique key prop so AnimatePresence can track their presence in the tree.

If you add a key prop to your main Box component it should work.