Multiple files validation

Hi all.

I need your help.

I have a Livewire component. I am trying to validate images from a form. I need to check how many files I can upload? I'm trying to upload five images, but I don't get the error that only three images are allowed.

My Livewire component:

namespace App\Http\Livewire\Backend\Saunas;

use Illuminate\Validation\ValidationException;
use Livewire\Component;
use Livewire\WithFileUploads;

class SaunaCreate extends Component
{
    use WithFileUploads;

	public $mainPhotos;

	/**
     * Real-time validation
     * @throws ValidationException
     */
    public function updated($propertyName)
    {
        $this->validateOnly($propertyName);
    }

    public function updatedMainPhotos()
    {
        $this->validate([
            'mainPhotos' => 'max:3', // This rule doesn't work
            'mainPhotos.*' => 'image|dimensions:max_width=1024,max_height=768', // This works
        ]);
	}

	public function save()
    {
		$this->validate();
	}

	public function render()
    {
		return view('livewire.backend.saunas.sauna-create')
            ->layout('layouts.backend');
	}
}

My sauna-create.blade.php file:

<x-backend.section title="Create a new sauna">
    <form wire:submit.prevent="save" enctype="multipart/form-data">

			<x-backend.form.group class="mt-10" gridClasses="grid-cols-10 gap-4">
            <x-slot name="title">Main images</x-slot>

            <div class="col-span-12 px-4 py-2 text-green-600" wire:loading wire:target="mainPhotos">Loading...</div>

            @if ($mainPhotos)
                @foreach($mainPhotos as $mainPhoto)
                    <img src="{{ $mainPhoto->temporaryUrl() }}" class="w-full col-span-1 h-24 rounded-lg" alt="{{ $sauna->bigtitle }}">
                @endforeach
            @endif

            <div class="col-span-12 mt-2">
                <label for="main_photos" class="font-medium space-x-2 transition text-sm bg-blue-500 text-blue-100 hover:bg-blue-600 py-3 rounded-full px-5 cursor-pointer" wire:target="mainPhotos" wire:loading.class.remove="bg-blue-500 text-blue-100 hover:bg-blue-600" wire:loading.class="bg-gray-400 text-gray-50">Add images</label>
                <input id="main_photos" class="invisible" wire:model="mainPhotos" type="file" multiple wire:loading.attr="disabled">
                <x-backend.form.error-input target="mainPhotos.*" class="mt-4"/>
            </div>
        </x-backend.form.group>

        <x-backend.button class="mt-10">Create a new sauna</x-backend.button>

    </form>

Where was I wrong?