Drangenter event is not fired in second time when item is dragged from file window to browser window in vue3

Question

I have this file-uploader component,

<template>
    <div class="dropzone" 
    @dragenter.prevent="setActive(true)" 
    @dragleave.prevent="setActive(false)" 
    @dragover.prevent="setActive(true)" 
    @drag.prevent="setActive(true)" 
    :class="{ 'active': active }">
        <slot name="dropzonebody"></slot>
    </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
const active = ref(false);

function setActive(isActive) {
    active.value = isActive;
}

const events = ['dragenter', 'dragover', 'dragleave', 'drop']
function preventDefaults(e) {
    e.preventDefault()
}
onMounted(() => {
    events.forEach((eventName) => {
        document.body.addEventListener(eventName, preventDefaults)
    })
})

onUnmounted(() => {
    events.forEach((eventName) => {
        document.body.removeEventListener(eventName, preventDefaults)
    })
})

</script>

and is used as below, in Parent component:

<template>
    <fileUploader @drop.prevent="executeDropEvents">
        <template #dropzonebody>
         // some buttons and child component
        </template>
    </fileUploader>
</template>

• When first time I try to drag and drop file its works fine, active class is added and works perfectly, One thing parent is removing active.
• When I try to perfome same action again it does not work, it is not adding active class, It adds active class when I go to body area and bring back to dragzone. But not right away, like as soon as I drag file over to dragzone, second time it is not adding active class.

function executeDropEvents(e){
   if (e.target.classList.contains('active')) {
    e.target.classList.remove('active')
  }
}