framer-motion AnimatePresence and LayoutGroup for pagination animation

Question

I want to nicely animate pagination on my website. There are three animations I want to obtains:

1. For each page the items should appear one after another (staggerChildren)
2. When I remove an item on a page, it should first animate out and then the items below removed item should move up.
3. When changinh page, first all items should animate out and then new items should animate it

Here is my code:

         {!queryHomeworks.isLoading && (
            <motion.div
              className='relative flex flex-col gap-4'
              animate='visible'
              initial='hidden'
              variants={{
                hidden: { opacity: 0 },
                visible: {
                  opacity: 1,
                  transition: {
                    staggerChildren: 0.2,
                    delayChildren: 0,
                  },
                },
              }}
            >
              <AnimatePresence initial={true} mode='wait'>
                <LayoutGroup>
                  {queryHomeworks.data?.results
                    .filter((x) => !hidden.includes(x.id))
                    .map((homework) => (
                      <motion.div
                        layout
                        key={homework.id}
                        variants={{
                          hidden: { opacity: 0, x: 20 },
                          visible: {
                            opacity: 1,
                            x: 0,
                          },
                        }}
                        exit={{ opacity: 0, x: 20 }}
                      >
                        <HomeworkCard
                          key={homework.id}
                          homework={homework}
                          showUserActions={
                            queryCurrentUser.data?.role === 'USER'
                              ? true
                              : false
                          }
                          onHide={() => setHidden([...hidden, homework.id])}
                        />
                      </motion.div>
                    ))}
                </LayoutGroup>
              </AnimatePresence>
            </motion.div>
          )}

Currently, only requirement 1) works as expected. For 2), when removing an item it disappear immidialtey instead of animate and then the items below coorectly move up as expected. For 3), the items only animates in but they do not animate out.

I would really appreciate help, I'm tweaking the settings in many ways but still it does not work as expected.