ReCAPTCHA in Livewire

Hi, I want to add reCAPTCHA to my form. I'm using Laravel 10 and Livewire 3. I've testing the code but don't understand why I upload a file the reCAPTCHA key gets empty. I have this input field to upload a picture.

<div class="mb-3" x-data="{ isUploading: false, progress: 0 }" x-on:livewire-upload-start="isUploading = true" x-on:livewire-upload-finish="isUploading = false" x-on:livewire-upload-error="isUploading = false" x-on:livewire-upload-progress="progress = $event.detail.progress">
<div class="mb-4">
                                    @if ($imagen == true)
                                        <img src="{{ $imagen->temporaryUrl() }}" class="mx-auto max-w-full rounded-lg"
                                            style="height: 150px;" alt="imagen" />
                                    @else
                                        <img src="{{ url('/') }}/img/default.png"
                                            class="mx-auto max-w-full rounded-lg" style="height: 150px;"
                                            alt="imagen" />
                                    @endif
                                </div>
                                <input wire:model='imagen' id="imagen" accept=".jpg, .jpeg, .png"
                                    class="relative m-0 block w-full sm:w-auto min-w-0 flex-auto rounded-md border border-solid border-neutral-300 bg-clip-padding px-3 py-[0.32rem] text-base font-normal text-neutral-700 transition duration-300 ease-in-out file:-mx-3 file:-my-[0.32rem] file:overflow-hidden file:rounded-none file:border-0 file:border-solid file:border-inherit file:bg-neutral-100 file:px-3 file:py-[0.32rem] file:text-neutral-700 file:transition file:duration-150 file:ease-in-out file:[border-inline-end-width:1px] file:[margin-inline-end:0.75rem] hover:file:bg-neutral-200 focus:border-primary focus:text-neutral-700 focus:shadow-te-primary focus:outline-none dark:border-neutral-600 dark:text-neutral-200 dark:file:bg-neutral-700 dark:file:text-neutral-100 dark:focus:border-primary"
                                    type="file" id="imagen" style="width: 357.33px;" />
                                <!-- Progress Bar -->
                                <div x-show="isUploading" class="mt-2">
                                    <progress max="100" x-bind:value="progress"
                                        class="w-full h-2 bg-blue-500"></progress>
                                    <p class="mt-2 text-sm font-semibold text-gray-700 dark:text-gray-200"
                                        x-text="'Cargando: ' + progress + '%'"></p>
                                </div>
                            </div>

When I upload a image, the reCAPTCHA filed gets empty

<div class="sm:col-span-3">
                            {!! RecaptchaV3::field('register', 'g_recaptcha_response') !!}
                            <div>
                                <span class="text-red-600 text-sm">
                                    @error('g_recaptcha_response')
                                        {{ $message }}
                                    @enderror
                                </span>
                            </div>
                        </div>

public function field($action, $lw, $name = 'g-recaptcha-response')
    {
        $fieldId = uniqid($name . '-', false);
        $html = '<input type="text" wire:model="' . $lw . '" name="' . $name . '" id="' . $fieldId . '">';
        $html .= "<script>
  grecaptcha.ready(function() {
      grecaptcha.execute('" . $this->sitekey . "', {action: '" . $action . "'}).then(function(token) {
         document.getElementById('" . $fieldId . "').value = token;
      });
  });
  </script>";
        return $html;
    }

Has anyone had this problem before? Thank you.