flowbite offcancvas error with JavaScript

hi,
i am using Flowbite off canvas to make a sidebar from my website when i click on the hamburger to oe the sidebar i got not problem but when i

click on the x inside the side bar to close it i got this error in the console #

<div id="navigation-sidebar" class="lg:hidden fixed top-0 left-0 z-40 h-screen p-4 overflow-y-auto transition-transform -translate-x-full duration-700 xs:w-full bg-info" tabindex="-1" aria-labelledby="navigation-sidebar" aria-hidden="true">
    <div class="grid grid-cols-2 mt-8 ">
        <div class="grid justify-start items-center">
            <x-logo viewbox="0 0 512 512" :sidebar_logo="true"/>
        </div>

        <div class="grid justify-end items-center">
            <button id="close" type="button" data-drawer-hide="navigation-sidebar" aria-controls="navigation-sidebar" class="text-slate-500 hover:text-white">
                <svg class="xs:w-4 xs:h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 14 14">
                    <path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="m1 1 6 6m0 0 6 6M7 7l6-6M7 7l-6 6"/>
                </svg>
                <span class="sr-only">Close menu</span>
            </button>
        </div>

    </div>
    <div class="grid grid-cols-1 xs:mt-32 items-center">
        <ul class="grid grid-rows-4 xs:w-full justify-center items-stretch gap-6 ">
            <li class="hover:border-b-2  border-white border-spacing-4">
                <a href="{{ route("Home.index") }}" class="font-roboto font-bold xs:text-5xl md:text-6xl  grid grid-cols-2 items-center justify-end py-2 px-3 text-white md:p-0 after:mb-1 hover:text-warning hover:animate-bounce" aria-current="page">
                    <x-svg.home-component id="Icons_Layers" class="text-white w-10 "  viewBox="0 0 512 512" data-name="Icons_Layers" />
                    <span class="xs:-ml-20 md:-ml-24">Home</span>
                </a>
            </li>
            <li class="hover:border-b-2 border-white">
                <a href="#" class="font-roboto font-bold xs:text-5xl md:text-6xl grid grid-cols-2 items-center justify-end  py-2 px-3 text-white md:p-0 after:mb-1 hover:text-warning hover:animate-bounce">
                    <x-svg.books-component class="text-white w-10" viewBox="0 0 512 512" fill="currentColor"/>
                    <span class="xs:-ml-20 md:-ml-24">Books</span>
                </a>
            </li>
            <li class="hover:border-b-2 border-white">
                <a href="#" class="font-roboto font-bold xs:text-5xl md:text-6xl grid grid-cols-2 items-center justify-end  py-2 px-3 text-white md:p-0 after:mb-1 hover:text-warning hover:animate-bounce">
                    <x-svg.question-mark-component class="text-white w-10" viewBox="0 0 24 24" fill="currentColor"/>
                    <span class="xs:-ml-20 md:-ml-24">Our-Story</span>
                </a>
            </li>
            <li class="hover:border-b-2 border-white">
                <a href="#" class="font-roboto font-bold xs:text-5xl md:text-6xl grid grid-cols-2 items-center justify-end py-2 px-3 text-white md:p-0 after:mb-1 hover:text-warning hover:animate-bounce">
                    <x-svg.phone-component class="w-10 text-white" viewBox="0 0 512 512" fill="currentColor"/>
                    <span class="xs:-ml-20 md:-ml-24">Contact</span>
                </a>
            </li>
        </ul>
    </div>
</div>

Start by reproducing the off-canvas close action from the supplied HTML and inspect the console error shown in the attached image. Compare the close button and drawer attributes with Flowbite's off-canvas usage; done means the sidebar closes without a console error.