I'm trying to animate a list of components in React using Chakra UI and/or Motion that is created from data provided by a hook and want to have enter and exit animations when an item is added to the data but it seems like when the data gets updated it just overwrites everything instead of animating first. Here's psuedocode of what I currently have that hopefully just contains what's pertinent:

const item = (itemDetails) => {
    const MotionBox = motion(Box)
    return {
        <MotionBox key="itemDetails.key" initial={false} animate={{opacity: 1, scaleY: 1}} exit={{opacity: 0, scaleY: 0}}>
            //Contents of item
        </MotionBox>
    }
const container = () => {
    const data = useDataHook()
    const [displayedData, setDisplayedData] = useState([])
    const initialRender = useRef(true)
    useEffect(() => {
        if (initialRender.current) {
            setDisplayedData(data)
        } elseif (data.length !== displayedData.length) {
            setDisplayedData(data)
        }
    }, [data, displayedData])
    return {
        <Box>
            <AnimatePresence initial={false}>
                {data.map((item, index) => {
                    return (
                        <Item key={index} itemData={displayedData}/>
                    )
                })
            </AnimatePresence>
        </Box>
    }
}

I've tried a number of things, if I don't do initial=false then every time the parent component is rendered everything animates on again making it look like they're flashing (these are in an accordion so don't want them to animate at start, just when added to the data.) But even without any animate in right now it's not animating out unless the list goes to empty because when the data updates it's re-rendering, I assume, before the animation can happen. Unfortunately I don't have the ability to prevent the parent component from being re-rendered when the data isn't updated.

I've tried things like when trying to apply the item via an apply button having it make the call to the server but set a state variable to prevent updating displayedItems until the success was returned successfully and onAnimationComplete on the motion element completed but it still doesn't animate off.

The ideal is having only the new item components animate on by scaling and fading in (ideally pushing things down smoothly but I don't know how to do that yet) and when an item is removed having it animate out by scaling and fading off. With something like this how do I just get the individual items I want to animate on or off to do so instead of all of them or none of them? I can do a comparison to find which items were added or removed but I wasn't able to figure out how to use that to get that specific item to animate off or on.