title: React router v6 component not loading
body: <p>The issue is the ProdDetails component is not called when it is nested (products/:id). Even though the URL changes on the address bar, No changes in UI</p>
  <p>Here is App.tsx</p>
  <pre><code>function App() {
  return (
  &lt;div className=&quot;App&quot;&gt;
    &lt;Routes&gt;
      &lt;Route path='/' element={&lt;Home /&gt;} /&gt;
      &lt;Route path='products' element={&lt;ProdList /&gt;} &gt;
        &lt;Route path=&quot;:id&quot; element={&lt;ProdDetails /&gt;} /&gt;
      &lt;/Route&gt;
    &lt;/Routes&gt;
  &lt;/div&gt;
  );
  }
  </code></pre>
  <p>The ProdList component</p>
  <pre><code>const ProdList: React.FC = () =&gt; {
  const [prods, setProdList] = useState&lt;IProducts&gt;([])
  
  useEffect(() =&gt; {
      ProdAPI.getAll()
          .then((list: IProducts) =&gt; {
              setProdList(list)
          })
  }, [])
  
  return(
      &lt;div&gt;
          &lt;div&gt;
              {prods.map((prod) =&gt; (
                  &lt;li key={(prod.id).toString()}&gt;
                      &lt;Link to={(prod.id).toString()}&gt;
                          {prod.title}
                      &lt;/Link&gt;
                  &lt;/li&gt;
              ))}
          &lt;/div&gt;
      &lt;/div&gt;
  )
  }
  export default ProdList
  </code></pre>
  <p>It works when it is not nested. What is the reason for that?</p>