Cannot destructure property 'active' of 'undefined' as it is undefined Nuxt 3 nuxt-headlessui

[hafizjavaid]

Nuxt Config Details:

export default defineNuxtConfig({
devtools: { enabled: true },
modules: [
'@nuxtjs/tailwindcss',
'nuxt-headlessui',
],
css: [
'@/assets/main.css',
],

})

Package Details:

"devDependencies": {
"@nuxt/devtools": "latest",
"@nuxtjs/tailwindcss": "^6.7.0",
"@types/node": "^18",
"nuxt": "^3.5.2",
"nuxt-headlessui": "^1.1.4"
}

Following errors I'm getting:

[Vue warn]: Failed to resolve component: Combobox 8:29:55 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: ComboboxButton 8:29:55 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: ComboboxInput 8:29:55 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: TransitionRoot 8:29:55 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: ComboboxOptions 8:29:55 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: ComboboxOption 8:29:55 PM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[8:29:55 PM] [nuxt] [request error] [unhandled] [500] Cannot destructure property 'selected' of 'undefined' as it is undefined.

[hafizjavaid]

By Bad I was not using Headless Prefix

So instead of using I was using