title: React Router v6 Route element cannot get Context value
body: <p>I'm using React <code>17.0.2</code>, react-router-dom <code>6.0.2</code> in my app right now.</p>
  <p>I try to use react Context and Route to add authenticate on routes.</p>
  <p>In <code>App.js</code> I can get value from AuthContext</p>
  <pre><code>...
  
  const { authState, authReducer } = useContext(AuthContext);
      
  &lt;Routes&gt;
      &lt;Route element={PrivateRoute}&gt;
           &lt;Route path=&quot;/dashboard/*&quot; element={&lt;MainLayout /&gt;} /&gt;
      &lt;/Route&gt;
      &lt;Route&gt;
          &lt;Route path=&quot;/auth/*&quot; element={&lt;EmptyLayout /&gt;} /&gt;
      &lt;/Route&gt;
      &lt;Route path=&quot;*&quot; element={NotFound} /&gt;
  &lt;/Routes&gt;
  ...
  </code></pre>
  <p>but in <code>PrivateRoute</code> I got undefined</p>
  <pre><code>const {authState, authReducer} = useContext(AuthContext);
  
  const {state, dispatch} = authState;
  const ele = state.login === true ? &lt;Outlet /&gt; : &lt;Navigate to=&quot;/login&quot; replace /&gt;;
  return &lt;Route path={path} element={ele} /&gt;;
  </code></pre>
  <p>In this case, how could I get AuthContext in PrivateRoute?</p>
  <p>Thank you</p>