[BUG] Exit animation wont trigger if using useMemo for component hook

[azaek]

1. Read the FAQs 👇

2. Describe the bug

I have a modal component with radix-ui and framer-motion like this

<Dialog.Root open={open} onOpenChange={setOpen} modal>
    <AnimatePresence>
        {
            open && (
                <Dialog.Portal forceMount={true}>
                    <Dialog.Overlay asChild>
                        <motion.div
                            key={"overlay-watchlist-add"}
                            className='fixed inset-0 z-50 cursor-pointer bg-black/50 backdrop-blur-[10px]'
                            initial={{ opacity: 0 }}
                            animate={{ opacity: 1 }}
                            exit={{ opacity: 0 }}></motion.div>
                    </Dialog.Overlay>
                    <Dialog.Content asChild>
                        <motion.div
                            initial={{
                                y: "20%",
                                opacity: 0
                            }}
                            animate={{
                                y: 0,
                                opacity: 1
                            }}
                            exit={{
                                y: "20%",
                                opacity: 0
                            }}
                            className='fixed inset-0 mx-auto z-50 ...'>
                            <div >
                                ...
                            </div>
                        </motion.div>
                    </Dialog.Content>
                </Dialog.Portal>
            )
        }
    </AnimatePresence>
</Dialog.Root>

It animates on enter and exit when I use it like <DialogComponenet open={open} setOpen={setOpen} />

But when I use it from a hook like this it won't trigger the exit animation

export const useModal = () => {
    const [open, setOpen] = useState(false);
    const ModalCallback = useCallback(() => {
        return (
            <DialogComponent
                open={open}
                setOpen={setOpen}
            />
        );
    }, [open, setOpen]);

    return useMemo(
        () => ({ setOpen, Modal: ModalCallback }),
        [ModalCallback]
    );
}

----------------------------------------
// Usage

const {
      Modal,
      setOpen
} = useModal();

------

<>
    <Modal />
</>

3. IMPORTANT: Provide a CodeSandbox reproduction of the bug

Example :CodeSanbox ↗

4. Steps to reproduce

Steps to reproduce the behavior:

1. Go to CodeSanbox ↗
2. Click on Open Dialog button
3. Click outside to close the dialog
4. Observe the exit animation
5. Now click on Open Dialog (hook) button
6. Try closing and observe exit animation

5. Expected behavior

The exit animation on Open Dialog (hook) button should trigger i.e. should react as the first button's dialog does.

6. Video or screenshots

--

7. Environment details

Brave Browser
"framer-motion": "^10.2.5",
"next": "13.0.2",
"@radix-ui/react-dialog": "^1.0.3",

[mattgperry]

The component returned from the hook is a "new" component every time one of the dependencies change. So it's not one persistent AnimatePresence, it's many new AnimatePresence components which would have no way of maintaining lifecycles when they're being destroyed every render.