Formkit autoanimate doesn't work on my list

Question

Formkit autoanimate doesn't work on my list. I have HospitalList, and there is a div with HospitalItems, i download autoanimate library, applied it, but it doesnt work

My main.js:

import { createApp } from 'vue';
import App from './App.vue';
import './styles/app.css';
import components from '@/components/UI';
import router from '@/router/index.js';
import store from '@/store';
import { autoAnimatePlugin } from '@formkit/auto-animate/vue'

const app = createApp(App)

components.forEach(component => {
  app.component(component.name, component)
})

app
  .use(autoAnimatePlugin)
  .use(router)
  .use(store)
  .mount('#app');

List:

<div v-auto-animate>
  <HospitalItem
    v-for="hospital in hospitals"
    :key="hospital._id"
    :hospital="hospital"
    @delete-hospital="deleteEmit"
  >
  </HospitalItem>
</div>

My HospitalItem:

   <div
        class="flex flex-col justify-center xl:w-[1270px] xl:h-[220px] bg-white border-2 px-[20px] py-[20px] mx-2 rounded-[20px] xl:whitespace-nowrap overflow-hidden dark:bg-gray-900 dark:border-gray-400">
        <div class="flex justify-between items-center">
            <h1 class="mb-4 font-bold text-[20px] max-w-[1200px] overflow-hidden dark:text-white cursor-pointer"
                @click="() => $router.push({ path: `/hospital/${hospital._id}` })">{{
                    hospital.hospitalName }}</h1>
            <i class="fa-solid fa-trash mr-[10px] dark:text-white text-[20px] cursor-pointer"
                @click="$emit('deleteHospital', hospital._id)"></i>
        </div>
        <div class="flex space-x-2 items-center max-w-1100px overflow-hidden">

            <p class="text-blue-500">{{ hospital.telNum }}</p>
            <span class="dark:text-white">|</span>
            <p class="dark:text-white">{{ hospital.email }}</p>
        </div>
        <div class="flex items-center space-x-2 mb-5">
            <p class="dark:text-white">{{ hospital.geoPos }}</p>
        </div>
        <div class="flex items-center space-x-2 -[1px] py-2">
            <div>
                <p class="dark:text-white font-bold">{{ hospital.leaderName }}</p>
                <p class="dark:text-white">{{ hospital.leaderJobTitle }}</p>
            </div>
        </div>
    </div>

Please help me fix this