Custom elements doesn't make Neighbouring elements animate (Framer Motion - Animation - NextUI)

[FZ1010]

Screen.Recording.2024-09-26.at.2.38.46.PM.mov

As you can see in the video, when the nextui's accordion item opens, all the
elements such as the sidebar buttons (Help & Information / Log Out) animates to their new location. in a normal scenario, you would have to use <LayoutGroup> from framer motion along with the attribute layout on each motion element in order to do that. but NextUI's accordion is automatically managing all these states and doing it for us.
However, when we click on our custom red div element, they will disappear but the neighbouring elements ( the same side bar buttons ) do not animate to their new location and instead, they suddenly change location without any animation what so ever.

considering that NextUI provider is handling all the layouts, there must be a way so we can make use of that.

I want to know how are we able to do so, without having to manually add layout attribute on each element or use <LayoutGroup> at all since they are all in nextui provider.

this is my code and i apperciate your help:

"use client";

import React from 'react';
import {AnimatePresence, LazyMotion, m, domMax} from "framer-motion";
import {Accordion, AccordionItem} from "@nextui-org/react";

const Test = () => {
    const [items, setItems] = React.useState([1, 2, 3, 4, 5]);
const defaultContent =
        "Lorem ipsum dolor sit amet, (put a long text)";
const handleRemove = (index) => {
        // Filter out the item that was clicked
        setItems(prevItems => prevItems.filter((_, i) => i !== index));
    };
return (
        <>
            <LazyMotion features={domMax}>
                <AnimatePresence>
                    {items.map((item, index) => (
                        <m.div
                            layout
                            key={item}
                            className="w-52 h-52 bg-red-950 mb-4"
                            onClick={() => handleRemove(index)}
                            exit={{opacity: 0, scale: 0.8}}
                            initial={{opacity: 0, scale: 0.8}}
                            animate={{opacity: 1, scale: 1}}
                        >
                            Item {item}
                        </m.div>
                    ))}
                </AnimatePresence>
            </LazyMotion>
            <Accordion>
                <AccordionItem key="1" aria-label="Accordion 1" title="Accordion 1">
                    {defaultContent}
                </AccordionItem>
                <AccordionItem key="2" aria-label="Accordion 2" title="Accordion 2">
                    {defaultContent}
                </AccordionItem>
                <AccordionItem key="3" aria-label="Accordion 3" title="Accordion 3">
                    {defaultContent}
                </AccordionItem>
            </Accordion>
            </>
    );
};

export default Test;