Svelte draggable, onleave event triggered when dragging over child elements

I have an element that I highlight when I drag a second element over it using the dragenter event, removing the highlight using the dragleave event. The highlight element has a child and when the dragged element passes over the child, the dragleave event is triggered and I lose my highlight. How do I prevent this?

REPL: https://svelte.dev/repl/8846d8b9674d42ae86a410dbb737fb79?version=3.35.0

<script>
    let highlight=""
</script>

<div class="dropon {highlight}" 
    on:dragenter={ event => {
        highlight="highlight"
        console.log( "enters") 
    }} 
        on:dragleave={ event => {
    highlight=""
        console.log( "leaves") 
    }} 
>
    <div class="inner">
        drop on me
    </div>
</div>

<div class="drag" draggable={true}>drag me</div>

<style>
    .dropon {
        padding: 20px;
        margin: 10px;
        background: #fee;
    }
    .drag {
        padding:20px;
        margin: 10px;
        cursor:grab;
        background: #efe;
    }
    .inner {
            background: #eef;
        padding: 8px;
    }
    .highlight {
        background: red;
    }
</style>