Necesito urgentemente ayuda sobre las pestañas de interfaz de usuario sin cabeza. Estaba tratando de arreglarlo por mi cuenta e investigar, pero no hay suficientes recursos sobre mi problema. Todavía no entiendo cómo esto no funciona, también leí los documentos.

 import { useEffect, useState } from "react"; import { Tab } from "@headlessui/react"; function classNames(...classes) { return classes.filter(Boolean).join(" "); } export default function Tabs({ tabs }) { const [index, setIndex] = useState(); return ( <Tab.Group defaultIndex={index} onChange={(index) => { console.log("Changed selected tab to:", index); setIndex(index); }} > <Tab.List className="text-xl space-x-9"> {tabs.map(({ tab }, index) => ( <Tab key={index} className={({ selected }) => classNames( selected ? "text-gray-900" : "text-gray-400 font-avenir-roman" ) } > {tab} </Tab> ))} </Tab.List> <Tab.Panels> {tabs.map(({ content }, index) => ( <Tab.Panel key={index}>{content}</Tab.Panel> ))} </Tab.Panels> </Tab.Group> ); }