DragAndDrop doesnt work if dropped on inner HTMLElement

Describe the bug
If the droppable target(span) has inner HTMLElement(img) and file is dropped on inner element(img)
dropReference.EnumerateFilesAsync() is empty. But if dopped on the margin between img and span, it works

To Reproduce

<span class="fileupload" style="" _bl_82097ba2-0b1c-4736-809f-b7fe2ae686ff="">
    <img src="/_content/MyLib/img/building.png" class="image">
</span>

Expected behavior
dropReference.EnumerateFilesAsync() shoud not be empty irrespective of where dropped as long as it is dropped on a child of target

Project type
'Server-side'/'SSB'

Environment

Chrome
Latest
Latest

I tried to debug into the javascript blob and I see that the issue is here

var dataTransfer = this.elementDataTransfers.get(element);
            if (dataTransfer) {
                files = dataTransfer;
            }

dataTransfer is undefined. Looking into the this.elementDataTransfers map, I noticed the key being used for the FileList is img rather than span. Which makes sense as img is the target when dropped.

Backtracked to this line 21

_this.elementDataTransfers.set(ev.target, list);

BlazorFileReader/src/Blazor.FileReader/script/FileReaderComponent.ts

Line 68 in e444312

this.elementDataTransfers.set(ev.target, list);

I think ev.target should have been element which is the ElementReference(span) captured