title: Nested route not found with react-router
body: <p>Here is my code</p>
  <pre><code>const AppRoutes: FC = () =&gt; {
    const {currentUser, fetchingAuth} = useAuth()
  
    let route
    if (fetchingAuth || !currentUser) {
      route = &lt;Route path='*' element={null}&gt;&lt;/Route&gt;
    } else {
      route = (
        &lt;&gt;
          &lt;Route path='/' element={&lt;OptInPage /&gt;} /&gt;
        &lt;/&gt;
      )
    }
  
    return (
      &lt;MemoryRouter&gt;
        &lt;Routes&gt;{route}&lt;/Routes&gt;
      &lt;/MemoryRouter&gt;
    )
  }
  </code></pre>
  <p>OptInPage</p>
  <pre><code>const OptInPage = () =&gt; (
    &lt;Routes&gt;
      &lt;Route element={&lt;OptInLayout /&gt;}&gt;
        &lt;Route path='opt-in' element={&lt;OptIn /&gt;} /&gt;
        &lt;Route path='get-items' element={&lt;GetItems /&gt;} /&gt;
        &lt;Route index element={&lt;OptIn /&gt;} /&gt;
      &lt;/Route&gt;
    &lt;/Routes&gt;
  )
  </code></pre>
  <p>When I try to navigate to <code>/get-items</code>, the route is not found, however when I change AppRoutes to be the following</p>
  <pre><code>const AppRoutes: FC = () =&gt; {
    const {currentUser, fetchingAuth} = useAuth()
  
    let route
    if (fetchingAuth || !currentUser) {
      route = &lt;Route path='*' element={null}&gt;&lt;/Route&gt;
    } else {
      route = (
        &lt;Route element={&lt;OptInLayout /&gt;}&gt;
          &lt;Route path='opt-in' element={&lt;OptIn /&gt;} /&gt;
          &lt;Route path='get-connections' element={&lt;GetConnections /&gt;} /&gt;
          &lt;Route index element={&lt;OptIn /&gt;} /&gt;
        &lt;/Route&gt;
      )
    }
  
    return (
      &lt;MemoryRouter&gt;
        &lt;Routes&gt;{route}&lt;/Routes&gt;
      &lt;/MemoryRouter&gt;
    )
  }
  </code></pre>
  <p>It does work, am I missing something?
  how come when the component is nested, the route is not found</p>