JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
  <div id="inner"></div>
</div>

CSS

#container {
  width: 200px;
  height: 200px;
  border: 1px dashed #000;
  padding: 30px;
}

#inner {
  width: 100%;
  height: 100%;
  background: #ccc;
}

JavaScript

const container = document.getElementById('container')
const inner = document.getElementById('inner')

let isChildEntered

container.addEventListener('dragenter', (e) => {
	if (!isChildEntered) {
	  console.log('dragenter')
  }
})

container.addEventListener('dragleave', (e) => {
  if (!isChildEntered) {
  	console.log('dragleave')
  }
}, true)

inner.addEventListener('dragenter', e => {
	isChildEntered = true
})

inner.addEventListener('dragleave', e => {
	isChildEntered = false
})