title: React Router Dom v6 shows active for index as well as other subroutes
body: <pre><code>&lt;Route path='/dashboard' element={&lt;Navbar /&gt;}&gt;
       &lt;Route index element={&lt;Home /&gt;} /&gt;
       &lt;Route path='profile' element={&lt;Profile /&gt;} /&gt;
       &lt;Route path='wallets' element={&lt;Wallet /&gt;} /&gt;
       &lt;Route path='users' element={&lt;Users /&gt;} /&gt;
  &lt;/Route&gt;
  </code></pre>
  <p>Here's my code and what basically happens is in my Navbar I got the active page link marked blue
  So when I'm on <code>/dashboard</code> it shows Home in blue
  But when I'm on <code>/dashboard/profile</code> it shows both home and profile in blue</p>
  <pre><code>&lt;li&gt;
      &lt;NavLink to=''&gt;
        {({ isActive }) =&gt;
           isActive ? (
                 &lt;text style={{color: blue}}&gt;Home&lt;/text&gt;
           ) : (                      
                 &lt;text&gt;Home&lt;/text&gt;
           )
        }
      &lt;/NavLink&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;NavLink to='profile'&gt;
      {({ isActive }) =&gt;
           isActive ? (
                 &lt;text style={{color: blue}}&gt;Profile&lt;/text&gt;
           ) : (                      
                 &lt;text&gt;Profile&lt;/text&gt;
           )
      }
      &lt;/NavLink&gt;
  &lt;/li&gt;
                        
  </code></pre>