Почему useDropZone не работает с типами данных: ['image/*']?

Я использую Vue 3. Почему useDropZone из VueUse 10.9.0 (последняя версия) не справляется dataTypes: ['image/*']? Я хочу реализовать загрузку одного изображения путем перетаскивания и/или (определяемого пользователем) выбора. При настройке dataTypes: ['image/*'] перетаскивание перестает работать. Если вы укажете dataTypes: ['image/png'], перетаскивание будет работать, но только для изображений в формате PNG. Мне нужна поддержка всех форматов изображений, например 'image/*'.

Я что-то не понимаю или VueUse не реализовал поддержку 'image/*' в useDropZone?

Мой полный код vue:

<script setup lang = "ts">
import { ref } from 'vue'
import { useDropZone} from '@vueuse/core'

const imageFilesData = ref<{ name: string, size: number, type: string, lastModified: number }[]>([])

function onImageDrop(files: File[] | null) {
    imageFilesData.value = []
    if (files) {
        imageFilesData.value = files.map(file => ({
            name: file.name,
            size: file.size,
            type: file.type,
            lastModified: file.lastModified,
        }))
    }
}

const imageDropZoneRef = ref<HTMLElement>()


const { isOverDropZone: isOverImageDropZone } = useDropZone(imageDropZoneRef, {dataTypes: ['image/*'], onDrop: onImageDrop })
</script>

<template>
    <div class = "flex flex-col gap-2">
        <div class = "w-full h-auto relative">
            <p>Drop files on to drop zones</p>
            <div grid = "~ cols-2 gap-2">
                <div
                    ref = "imageDropZoneRef"
                    class = "flex flex-col w-full min-h-[200px] h-auto bg-gray justify-center items-center mt-6 rounded"
                >
                    <div class = "font-bold mb-2">
                        Image DropZone
                    </div>
                    <div>
                        isOverDropZone:
                        <span :class = "isOverImageDropZone ? 'text-green-600 shadow-1' : 'text-red-600 shadow-1'">{{ isOverImageDropZone }}</span>
                    </div>
                    <div class = "flex flex-wrap justify-center items-center">
                        <div v-for = "(file, index) in imageFilesData" :key = "index" class = "w-[200px] bg-gray-200 m-2 p-6">
                            <p>Name: {{ file.name }}</p>
                            <p>Size: {{ file.size }}</p>
                            <p>Type: {{ file.type }}</p>
                            <p>Last modified: {{ file.lastModified }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>