title: HeadlessUI Tabs active tabs gets back to 0 after refresh
body: <p>I badly need help about headlessUI tabs. I was trying to fix it my own and research but there's not enough resources about my problem. I still don't understand how this is not working, I also read the docs.</p>
  <pre><code>import { useEffect, useState } from &quot;react&quot;;
  import { Tab } from &quot;@headlessui/react&quot;;
  
  function classNames(...classes) {
    return classes.filter(Boolean).join(&quot; &quot;);
  }
  
  export default function Tabs({ tabs }) {
    const [index, setIndex] = useState();
  
    return (
      &lt;Tab.Group
        defaultIndex={index}
        onChange={(index) =&gt; {
          console.log(&quot;Changed selected tab to:&quot;, index);
          setIndex(index);
        }}
      &gt;
        &lt;Tab.List className=&quot;text-xl space-x-9&quot;&gt;
          {tabs.map(({ tab }, index) =&gt; (
            &lt;Tab
              key={index}
              className={({ selected }) =&gt;
                classNames(
                  selected ? &quot;text-gray-900&quot; : &quot;text-gray-400 font-avenir-roman&quot;
                )
              }
            &gt;
              {tab}
            &lt;/Tab&gt;
          ))}
        &lt;/Tab.List&gt;
        &lt;Tab.Panels&gt;
          {tabs.map(({ content }, index) =&gt; (
            &lt;Tab.Panel key={index}&gt;{content}&lt;/Tab.Panel&gt;
          ))}
        &lt;/Tab.Panels&gt;
      &lt;/Tab.Group&gt;
    );
  }
  </code></pre>