title: How to make this code compatible for react-router v6
body: <p>In ProtectedRoute.js I have coded:</p>
  <pre><code>const ProtectedRoute = ({ component: Component, ...rest }) =&gt; {
    const { loading, isAuthenticated, user } = useSelector((state) =&gt; state.user);
    return (
      &lt;Fragment&gt;
        {!loading &amp;&amp; (
            &lt;Routes&gt;
          &lt;Route
            {...rest}
            render={(props) =&gt; {
              if (!isAuthenticated) {
                return &lt;Navigate to=&quot;/login&quot; /&gt;;
              }
              return &lt;Component {...props} /&gt;;
            }}
          /&gt;
          &lt;/Routes&gt;
        )}
      &lt;/Fragment&gt;
    );
  };
  
  export default ProtectedRoute;
  </code></pre>
  <p>and in App.js I have written as:</p>
  <pre><code>function App() {
    const { isAuthenticated, user } = useSelector((state) =&gt; state.user);
    useEffect(() =&gt; {
      WebFont.load({
        google: { families: [&quot;Roboto&quot;, &quot;Droid Sans&quot;, &quot;Chilanka&quot;] },
      });
      store.dispatch(loadUser());
    }, []);
  
    return (
      &lt;Router&gt;
        &lt;Header /&gt;
        {isAuthenticated &amp;&amp; &lt;UserOptions user={user} /&gt;}
        &lt;Routes&gt;
          &lt;Route exact path=&quot;/&quot; element={&lt;Home /&gt;} /&gt;
          &lt;Route exact path=&quot;/product/:id&quot; element={&lt;ProductDetails /&gt;} /&gt;
          &lt;Route exact path=&quot;/products&quot; element={&lt;Products /&gt;} /&gt;
          &lt;Route path=&quot;/products/:keyword&quot; element={&lt;Products /&gt;} /&gt;
          &lt;Route exact path=&quot;/search&quot; element={&lt;Search /&gt;} /&gt;
          &lt;Route exact path=&quot;/login&quot; element={&lt;Authenticate /&gt;} /&gt;
          &lt;ProtectedRoute exact path=&quot;/account&quot; element={&lt;Profile /&gt;} /&gt;
        &lt;/Routes&gt;
        &lt;Footer /&gt;
      &lt;/Router&gt;
    );
  }
  
  export default App;
  </code></pre>
  <p>Error says:  [ProtectedRoute] is not a Route component. All component children of Routes must be a Route or &lt;React.Fragment&gt;.</p>
  <p>Is there something missing! Thank you</p>