Why was @close event fired twice?

[betaSavvy]

I am trying out a simple implementation of dialog for vue with the following code

<TransitionRoot as="template" :show="isOpen">
    <Dialog as="div" class="relative z-10" @close="isOpen = false">
      <div class="fixed inset-0 bg-black/70" />

      <div class="fixed inset-0 overflow-hidden">
        <div class="absolute inset-0 overflow-hidden">
          <div class="pointer-events-none fixed inset-y-0 right-0 flex max-w-full pl-10">
            <TransitionChild as="template" enter="transform transition ease-in-out duration-500 sm:duration-700" enter-from="translate-x-full" enter-to="translate-x-0" leave="transform transition ease-in-out duration-500 sm:duration-700" leave-from="translate-x-0" leave-to="translate-x-full">
            <DialogPanel class="pointer-events-auto w-screen max-w-md">
              <div class="flex h-full flex-col overflow-y-scroll bg-white py-6 shadow-xl">
                <div class="px-4 sm:px-6">
                  <div class="flex items-start justify-between">
                    <DialogTitle class="text-lg font-medium text-gray-900"> Panel title</DialogTitle>
                    <div class="ml-3 flex h-7 items-center">
                      <button type="button" class="rounded-md bg-white text-gray-400 hover:text-gray-500 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2" @click="toggleCourseSelectionPanel()">
                        <span class="sr-only">Close panel</span>
                        <XIcon class="h-6 w-6" aria-hidden="true" />
                      </button>
                    </div>
                  </div>
                </div>
                <div class="relative mt-6 flex-1 px-4 sm:px-6">
                  <!-- // Content here -->
                </div>
              </div>
            </DialogPanel>
           </TransitionChild>
          </div>
        </div>
      </div>
    </Dialog>
  </TransitionRoot>

When clicking(once) anywhere outside of the dialog, this is what appeared on the vue devtools event timeline with the @close event firing once. Is this behaviour intended?

The reason I brought this up is, this behaviour breaks when I replace @close="isOpen = false" with @close="toggleState()" and that isOpen will be always be true due to calling the function twice.

const isOpen = ref(false);

const toggleState = () => {
  isOpen.value = !isOpen.value;
}

[chiuwah]

I have the same problem with @close fired twice using Dialog inside TransitionRoot. Without TransitionRoot the dialog @close is fired only once (as intended). I am using @headlessui/vue v1.17.16

Any help is appreciated!