Quasar infinite scrolls keep fetching datas

I'm trying to implement the infinite scroll using quasar. Here's my code:

<template>
  <q-page padding>
    <q-tab-panels>
    <!-- Some tag about panels -->
      <q-tab-panel name="...">
        <q-infinite-scroll
          @load="fetchMoreData"
          :disable="!hasMoreData"
          :offset="10"
          :debounce="1500"
        >
          <MyCard
            v-for="(data, index) in datas"
            :weeklyEvaluation="datas"
            :key="index"
          />
          <template v-slot:loading>
            <div class="row justify-center q-my-md">
              <q-spinner-dots color="primary" size="40px" />
            </div>
          </template>
        </q-infinite-scroll>
      </q-tab-panel>
    </q-tab-panels>
  <q-page padding>
</template>
<script setup>
// import ...
const datas = ref([
  // ...
])

async function fetchMoreData() {
  const newDatas = await fetch();
  datas.value = [
    ...datas.value,
    newDatas
  ]
}
</script>

What I expected was that the fetchMoreData function would only be called when I scrolled down the list of data. However, contrary to what I expected, the fetchMoreData function was called every 2 seconds and only stopped when it loaded all the data in the database. If you guys see the problem I'm having or need more information, please reply to me soon.

For offset to work correctly, it is necessary to wrap it in a div and set the height and overflow: auto for that div

<div ref="scrollTargetRef" style="height: 400px; overflow: auto;">
<q-infinite-scroll
          :scroll-target="$refs.scrollTargetRef" 
          @load="fetchMoreData"
          :disable="!hasMoreData"
          :offset="200"
        >
          <MyCard
            v-for="(data, index) in datas"
            :weeklyEvaluation="datas"
            :key="index"
          />
          <template v-slot:loading>
            <div class="row justify-center q-my-md">
              <q-spinner-dots color="primary" size="40px" />
            </div>
          </template>
        </q-infinite-scroll>
</div>

Try something like this.