Livewire Transition and x-on:click.outside not working

Hello everyone i need some help. When i try to use :click.outside and transition same time its not working. My modal shown and hide aoutomaticly.

<div>
  <div class="m-4" x-data="{ showModal: false }">
    <x-button light positive label="Add Blog" x-on:click="showModal = true" />
    <div
        x-on:keyup.escape.window="showModal = false" 
        class="flex fixed inset-0 bg-gray-900 bg-opacity-75
        items-center justify-center" 
        x-show="showModal"
        x-transition:enter.scale.80
        x-transition:leave.scale.90
        x-cloak>

      <form wire:submit='addBlog' 
        x-on:click.outside="showModal = false"
        class="p-8 w-1/4 bg-gray-950 rounded-md ">
        <x-input class="mb-3" label="Name" placeholder="your name" description="Inform your full name" />
        <x-textarea class="mb-3" label="Notes" placeholder="write your notes" />
        <div
          class="flex items-center justify-center col-span-1 bg-gray-100
               shadow-md cursor-pointer sm:col-span-2 dark:bg-secondary-700
                rounded-xl h-20">
          <div class="flex flex-col items-center justify-center">

            <p class="text-blue-600 dark:text-teal-600">Click or drop files here</p>
          </div>
        </div>
        
       <div class="flex justify-between items-center mt-4 -mb-2">
        <button type="reset" class="bg-red-500 px-4 py-2 hover:bg-red-800 text-white rounded-md">Delete</button>
        <button type="button" x-on:click.throttle="showModal = false" class="bg-yellow-500 px-4 py-2 hover:bg-yellow-800 text-white rounded-md">Cancle</button>
        <button type="submit" class="bg-green-500 px-4 py-2 hover:bg-green-800 text-white rounded-md">Save</button>
       </div>
      </form>
    </div>

  </div>
</div>