using autoAnimate with multiple parents in react in a single component

[Fawwaz-2009]

Hey Guys amazing library thanks so much for your contirbuation!. I wanted to ask is it currently possible to use auto animate with multiple parents in the same component. Something similar to the Vue below example from the docs.

I've been able to recreate the same example in react but not without extracting listItem and have it import it's own hook?

<script setup lang="ts">
import { ref } from "vue"
import { vAutoAnimate } from "../../../../src"
const faq = ref([
  {
    id: "why",
    question: "Why did you create it?",
    answer: `We needed a way `,
  },
  {
    id: "license",
    question: "Is it open source?",
    answer: `It sure is! AutoAnimate is MIT licensed,.`,
  },
  {
    id: "who",
    question: "Who made this?",
    answer: `AutoAnimate is a team effort 💪 . `,
  },
])
const current = ref(faq.value[0].id)
</script>

<template>
  <div class="example accordion-example">
    <ul class="accordion">
      <li class="accordion-item" v-for="q in faq" :key="q.id" v-auto-animate>
        <div
          class="question"
          @click="current = current === q.id ? false : q.id"
        >
          {{ q.question }}
        </div>
        <p class="answer" v-if="q.id === current" v-html="q.answer" />
      </li>
    </ul>
  </div>
</template>

[justin-schroeder]

I think moving to using function refs instead of actual refs would solve this issue.