v-touch-pan type TouchPanValue not valid?

[DarkLite1]

I'm following this tutorial, which uses v-touch-pan:

<template>
  <q-page
    v-touch-pan.vertical.prevent.mouse="hanldePan"
   ...
</template>

<script setup lang="ts">
  const hanldePan = (e) => {
    console.log(e.delta.y);
  }
</script>

This throws the TS error:

[vue-tsc] Parameter 'e' implicitly has an 'any' type.

Trying to import the type as suggested here:

<script setup lang="ts">
  import { TouchPanValue } from 'quasar';

const hanldePan = (e: TouchPanValue) => {
  console.log(e.delta.y);
}

Throws the TS error:

[vue-tsc] Type '(e: TouchPanValue) => void' is not assignable to type 'TouchPanValue'. Types of parameters 'e' and 'details' are incompatible. Type '{ evt?: Event | undefined; touch?: boolean | undefined; mouse?: boolean | undefined; position?: { top?: number | undefined; left?: number | undefined; } | undefined; direction?: "up" | ... 3 more ... | undefined; ... 5 more ...; delta?: { ...; } | undefined; }' is not assignable to type 'TouchPanValue'. Type '{ evt?: Event | undefined; touch?: boolean | undefined; mouse?: boolean | undefined; position?: { top?: number | undefined; left?: number | undefined; } | undefined; direction?: "up" | ... 3 more ... | undefined; ... 5 more ...; delta?: { ...; } | undefined; }' provides no match for the signature '(details: { evt?: Event | undefined; touch?: boolean | undefined; mouse?: boolean | undefined; position?: { top?: number | undefined; left?: number | undefined; } | undefined; direction?: "up" | ... 3 more ... | undefined; ... 5 more ...; delta?: { ...; } | undefined; }): void'.

Am I missing something obvious here?

Thank you for your help.

[yusufkandemir]

const handlePan: TouchPanValue = (event) => {
  // ...
}