Multiple drag & drop file upload

Hello. I'm making a drag and drop component for multiple file upload. Not maybe I'm making some mistake or Livewire has some issue.

I have a component:

product-upload-modal.blade.php

<div>
    <div class="border border-dashed border-gray-400 p-4">
        <div
            x-data="{ isDragging: false }"
            x-on:dragover.prevent="isDragging = true"
            x-on:dragleave.prevent="isDragging = false"
            class="h-40 flex items-center justify-center border-2 border-gray-300 border-dashed rounded-md"
            :class="{ 'bg-blue-100': isDragging }"
            id="dropArea">
            <label class="cursor-pointer">
                <span class="text-gray-500">
                    Drag and drop files here or
                    <input
                        type="file"
                        multiple
                        wire:model="files"
                        class="hidden"
                        id="fileInput">
                    <span class="text-blue-500 hover:underline focus:outline-none">
                        Browse
                    </span>
                </span>
            </label>
        </div>
    </div>

    <div class="mt-4">
        @if ($files)
            <ul>
                @foreach ($files as $index => $file)
                    <li wire:key="image-{{ $index }}">{{ $file->getClientOriginalName() }}</li>
                @endforeach
            </ul>
            <button wire:click="upload" class="bg-blue-500 text-white px-4 py-2 rounded mt-2">
                Upload
            </button>
        @endif
    </div>
    <script>
        document.getElementById('dropArea').addEventListener('drop', function (e) {
            e.preventDefault();
            e.stopPropagation();
            let files = e.dataTransfer.files;
            handleFiles(files);
        });

        document.getElementById('fileInput').addEventListener('change', function (e) {
            let files = e.target.files;
        });
    </script>
</div>

layout.blade.php

@livewireScripts
@livewire('livewire-ui-modal')
<script>
    function handleFiles(files){
        console.log(files);
        Livewire.emit('handleDrop',files);
    }
</script>

When I'm upload files by file window evrything it's ok but when I'm making drag & drop in class method I got empty array instad of files..

<?php

namespace App\Http\Livewire\Product;

use Livewire\WithFileUploads;
use LivewireUI\Modal\ModalComponent;


class ProductUploadModal extends ModalComponent
{

    use WithFileUploads;
    protected $listeners = ['handleDrop' => 'handleDrop'];
    public $files = [];
    

    public function render()
    {
        return view('livewire.product.product-upload-modal');
    }

    public function handleDrop($files)
    {
        dd($files);
        foreach ($files as $file) {
            $this->files[] = [
                'name' => $file->getClientOriginalName(),
                'path' => $file->getRealPath()
            ];
        }
    }

The console.loge(files) give me filelist and it's ok. but in payload is empty array.

I'm using:
Livewire: v2.12.5
Laravel v10.17.1