Livewire 3 - Avoid Laravel Error Page

hi guys! I'm building my first app with Livewire 3 and I'm really enjoying it so far, but I have a problem.

In my form I want users to only upload allowed images .png, .jpg, etc. But if I select, for example, a .zip file and drag it to my form, the whole Laravel error screen appears with text like this:

Unable to preview file with "zip" extension. See the configuration of livewire.temporary_file_upload.preview_mimes.

I have the @error in my form, but it seems like Laravel intercepts it first or I really don't know.

This happens when the user drags a file to the form, if they click on it and upload an image like this, it doesn't happen thanks to "accept=.."

This is what my component looks like:

<?php

namespace App\Livewire;

use Livewire\Component;
use Livewire\WithFileUploads;
use Illuminate\Support\Facades\Storage;
use Symfony\Component\Process\Exception\ProcessFailedException;
use Symfony\Component\Process\Process;
use GuzzleHttp\Client;
use App\Jobs\ProcessImage;
use App\Models\Image;
use Livewire\Attributes\Validate;


class ImageUpload extends Component{
   use WithFileUploads;
   

   public $image; 
   public $message = '';
   public $imageId; 
   public $imagePreviewUrl;
   public $imageProcessedUrl; 

   protected $rules = [
       'image' => 'image|max:12240', 
   ];

   protected $messages = [
       'image.required' => 'Por favor, seleccione una imagen para subir.',
       'image.image' => 'El archivo seleccionado debe ser una imagen.',
       'image.max' => 'El tamaño de la imagen no debe superar los 12 MB.',
   ];

   public function updatedImage()
   {
       $this->validate([
           'image' => 'mimes:jpg,jpeg,png',
       ]);
   }


   public function processImage(){
       $this->validate();
       
       $user = auth()->user();

and the form:

<form wire:submit.prevent="processImage" class="rounded flex flex-col items-center justify-center w-full md:w-1/2 h-96 border-2 border-zinc-400 p-4 m-4">
   <div class="relative border-2 border-dashed border-zinc-600 w-full h-64 max-h-64 flex items-center justify-center mb-4 cursor-pointer overflow-hidden">
       @if ($image)
           <div class="w-full h-full flex justify-center items-center overflow-hidden">
               <img src="{{ $image->temporaryUrl() }}" class="max-w-full max-h-full object-contain">
               <button wire:click="removeImage" class="absolute top-0 right-0 text-white font-bold p-2 rounded-full cursor-pointer">X</button>
           </div>
       @else
           <div class="flex flex-col items-center justify-center h-full w-full">
               <label for="file-upload" class="flex flex-col items-center justify-center h-full w-full text-center cursor-pointer">
                   <span class="text-zinc-500">Drag your image here or click to select</span>
               </label>
               <input type="file" id="file-upload" wire:model="image" accept="image/jpeg,image/png,image/jpg,image/webp" class="opacity-0 absolute inset-0 w-full h-full cursor-pointer">
           </div>
       @endif
   </div>
   @if ($image)
       <button type="submit" class="bg-teal-600 text-white font-bold hover:bg-teal-700 rounded py-2 px-4 w-48">Process</button>
   @endif
   @error('image')
       <span class="text-red-500">{{ $message }}</span>
   @enderror
</form>