Error - isDragReject is always true

[meirlamdan]

I defined that it is accept only pdf and it does accept only pdf files. But even when I throw a pdf file "isDragReject" is true. You can see it in action here and in GitHub

<script setup>
import { ref } from "vue";
import { useDropzone } from "vue3-dropzone";

import File from "./File.vue";

const props = defineProps(["accept", "files"]);
const dragDisabled = ref(false);

function onDrop(acceptFiles, rejectReasons) {
  props.files.push(...acceptFiles);
  rejectReasons.length && console.log(rejectReasons);
}
const { getRootProps, getInputProps, isDragActive, isDragReject } = useDropzone(
  {
    onDrop,
    accept: props.accept,
  }
);
const deleteFile = (file) => {
  props.files.splice(props.files.indexOf(file), 1);
};
</script>

<template>
  <div class="dropzone">
    <div
      v-bind="getRootProps()"
      class="files"
      :class="{ 'drag-active': isDragActive, 'drag-reject': isDragReject }"
    >
      <input v-bind="getInputProps()" />
      <div>
       //

      </div>
      <p v-if="isDragActive">Drop the files here ...</p>
      <p v-else>Drag 'n' drop some files here, or click to select files</p>
    </div>
  </div>
</template>

<style>
.drag-active {
  border: 2px dashed #000;
}
.drag-reject {
  border: 2px dashed #ff0000;
}
</style>

<Dropzone :files="files" accept=".pdf" />

[kakauandme]

Same happens when

multiple: false,
maxSize: 5 * 1024 * 1024,

specified.