title: Popover and Hover
body: <p>As I was hovering my nav women's category, it somehow only shows men's data under it, when I hover men's catgory, it correctly shows all men's data, but somehow it skipped the women's data when mapping it,  can anyone help me where my code is wrong? also do I need have popover to be open state even if I just hover it ?</p>
  <pre><code>export default function Example() {
    const [open, setOpen] = useState(false);
    const [isShowing, setIsShowing] = useState(false);
  &lt;Popover.Group&gt;
                  &lt;div
                    onMouseEnter={() =&gt; setIsShowing(true)}
                    onMouseLeave={() =&gt; setIsShowing(false)}
                    
                  &gt;
                    {navigation.categories.map((category) =&gt; (
                      &lt;Popover key={category.name} className=&quot;flex&quot;&gt;
                        {({ open }) =&gt; ( 
                        {
                          &lt;&gt;
                            &lt;div className=&quot;relative flex&quot;&gt;
                              &lt;Popover.Button
                                className={classNames(
                                 open
                                    ? &quot;border-indigo-600&quot;
                                    : &quot;border-transparent&quot;,
                                 &quot;relative z-10 flex items-center&quot;
                               )}
                              &gt;
                                {category.name}
                              &lt;/Popover.Button&gt;
                            &lt;/div&gt;
  
                            &lt;Transition
                              show={isShowing}
                              onMouseEnter={() =&gt; setIsShowing(true)}
                              onMouseLeave={() =&gt; setIsShowing(false)}
                             
                       
                            &lt;/Transition&gt;
                          &lt;/&gt;
                        }
                      &lt;/Popover&gt;
                    ))}
  </code></pre>
  <p>here is my data:</p>
  <pre><code>const navigation = {
    categories: [
      {
        id: &quot;women&quot;,
        name: &quot;Women&quot;,
        featured: [
          {
            name: &quot;New Arrivals&quot;,
           }
        {
        id: &quot;men&quot;,
        name: &quot;men&quot;,
        featured: [
          {
            name: &quot;New Arrivals&quot;,
           }]
        ]}
  </code></pre>