Unable to attain leave transition on HeadlessUI's Dialog component.

[Quanttelium]

What package within Headless UI are you using?

@headlessui/vue

What version of that package are you using?

v1.7.17

What browser are you using?

Chrome

Describe your issue

Greetings team! I am trying to apply transitions to the HeadlessUI's Dialog component. The entry transition is working but the leave transition is not working as expected. Here below is the code for the same. I really request you please shed some light on this, if its a bug or just occurring for me.

<script setup>
import {
    Dialog,
    DialogPanel,
    TransitionRoot,
    TransitionChild,
} from '@headlessui/vue'

import { XMarkIcon, BellIcon } from '@heroicons/vue/24/outline'
</script>

<template>
    <TransitionRoot
        :show="mobileMenuOpen"
        as="template"
    >
        <Dialog :open="mobileMenuOpen" @close="mobileMenuOpen = false">
            <TransitionChild
                as="template"
                enter="duration-300 ease-out"
                enter-from="opacity-0"
                enter-to="opacity-100"
                leave="duration-200 ease-in"
                leave-from="opacity-100"
                leave-to="opacity-0"
            >
                <div class="fixed inset-0 z-50" />
            </TransitionChild>
            <TransitionChild
                as="template"
                enter="duration-300 ease-out"
                enter-from="opacity-0 scale-95"
                enter-to="opacity-100 scale-100"
                leave="duration-200 ease-in"
                leave-from="opacity-100 scale-100"
                leave-to="opacity-0 scale-95"
            >
                <DialogPanel
                    class="fixed inset-y-0 z-50 w-full overflow-y-auto bg-white sm:ring-1 sm:ring-gray-900/10 transition-all"
                >
                    <div class="flex justify-center px-6 py-5 lg:px-8">
                        <div
                            class="flex max-w-6xl flex-1 items-center justify-between"
                        >
                            <div class="flex justify-start">
                                <button
                                    type="button"
                                    class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-sky-800"
                                    @click="mobileMenuOpen = false"
                                >
                                    <span class="sr-only">Open main menu</span>
                                    <BellIcon
                                        class="h-6 w-6"
                                        aria-hidden="true"
                                    />
                                </button>
                            </div>
                            <div class="flex flex-1 justify-center">
                                <a href="#" class="-m-1.5 p-4">
                                    <span class="sr-only"
                                        >Gulati Catering Company</span
                                    >
                                    <img
                                        class="h-[4rem] w-auto transition-all duration-500 ease-in-out sm:h-[4.5rem]"
                                        src="../../../public/assets/images/logo-toggled.svg"
                                        alt=""
                                    />
                                </a>
                            </div>
                            <div class="flex justify-end">
                                <button
                                    type="button"
                                    class="-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-sky-800"
                                    @click="mobileMenuOpen = false"
                                >
                                    <span class="sr-only">Open main menu</span>
                                    <XMarkIcon
                                        class="h-6 w-6"
                                        aria-hidden="true"
                                    />
                                </button>
                            </div>
                        </div>
                    </div>
                    <OverlayScrollbarsComponent
                        class="h-[calc(100vh-124px)] sm:h-[calc(100vh-132px)]"
                        defer
                    >
                        <div class="flex justify-center px-6 py-6">
                            <div
                                class="flex max-w-6xl flex-1 items-center justify-between"
                            >
                                <div class="-my-6 divide-y divide-gray-500/10">
                                    <div class="space-y-2 py-6">
                                        <a
                                            v-for="item in navigation.main"
                                            :key="item.name"
                                            :href="item.href"
                                            class="-mx-3 block rounded-lg px-3 py-2 font-tfarrow text-2xl leading-7 text-gray-900 hover:bg-gray-50"
                                            >{{ item.name }}</a
                                        >
                                    </div>
                                </div>
                            </div>
                        </div>
                    </OverlayScrollbarsComponent>
                </DialogPanel>
            </TransitionChild>
        </Dialog>
    </TransitionRoot>
</template>