title: React typescript useParams() always returns undefined in useEffect
body: <p>I am trying to achieve my profile component fetching logged user's data on path /me and fetching someone else's data on path user/:username.</p>
  <p>Following example from react router blogs, I came up with something like this:</p>
  <pre><code>function App(): JSX.Element {
  
  //...
              &lt;PrivateRoute
                  exact
                  path=&quot;/me&quot;
                  render={(props) =&gt; (
                      &lt;ProfileComponent {...props} principal={states.username} isMyProfile={true} /&gt;
                  )}
              /&gt;
              &lt;PrivateRoute
                  path=&quot;/user/:username&quot;
                  render={(props) =&gt; (
                      &lt;ProfileComponent {...props} principal={states.username} isMyProfile={false} /&gt;
                  )}
              /&gt;
  // ...
  }
  
  
  interface ParamTypes {
      path: string;
  }
  
  export default function ProfileComponent
    (props: { principal: string; isMyProfile: boolean }): JSX.Element {
  
    const { path } = useParams&lt;ParamTypes&gt;();
  
    useEffect(() =&gt; {
          async function fetch(username: string) {
              // ...
          }
  
          props.isMyProfile ? fetch(props.principal) : fetch(path);
  
      }, [props.principal, path, props.isMyProfile]); 
  
     // ...
  }
  </code></pre>
  <p>but the path is always undefined. What am I missing?</p>