The interactive imports and hooks have been set to client components, however for the actual NavTab I am getting this error:

NavTabs component requires at least one valid NavTab child with a unique id.

I'm unsure as to why, any help is appreciated.

The component: https://pastebin.com/zC8zVqMr

Basic Example:

            {/* Basic NavTabs Example */}
            <div className="mb-10">
                <h2 className="text-xl mb-4">Basic Tabs</h2>
                <NavTabs activeTabCustomStyle="border-blue-500">
                    <NavTab label="Profile" id="profile">
                        <div className="p-4">
                            <h3 className="font-bold mb-2">Profile Content</h3>
                            <p>This is the profile tab content.</p>
                        </div>
                    </NavTab>
                    <NavTab label="Settings" id="settings">
                        <div className="p-4">
                            <h3 className="font-bold mb-2">Settings Content</h3>
                            <p>Configure your settings here.</p>
                        </div>
                    </NavTab>
                    <NavTab label="Disabled" id="disabled" disabled>
                        <div className="p-4">
                            <p>This content wont be visible.</p>
                        </div>
                    </NavTab>
                </NavTabs>
            </div>