title: Passing props to the components of ProtectedRoute in Auth0
body: <p>I am following the instructions <a href="https://auth0.com/developers/hub/code-samples/spa/react-typescript/basic-authentication-react-router-6" rel="nofollow noreferrer">here</a> to use Auth0 with react-router-dom V6 and so far I am able to get it working with the basic routes.</p>
  <p>Now I am trying to make it work with components which accept props and I not sure how to pass in the props correctly. This is the code for the <code>ProtectedRoute</code></p>
  <pre><code>import React, { ComponentType } from 'react';
  import { withAuthenticationRequired } from '@auth0/auth0-react';
  import { Loading } from './Loading';
  
  interface ProtectedRouteProps {
    component: ComponentType,
    props: any
  }
  
  export const ProtectedRoute: React.FC&lt;ProtectedRouteProps&gt; = ({
    component, props
  }) =&gt; {
    const Component = withAuthenticationRequired(component, {
      onRedirecting: () =&gt; &lt;Loading /&gt;,
    });
  
    return &lt;Component {...props} /&gt;;
  };
  </code></pre>
  <p>And I am setting up the basic route component as</p>
  <p><code>&lt;Route path=&quot;/&quot; element={&lt;ProtectedRoute component={Dashboard} /&gt;}/&gt;</code></p>
  <p>My <code>Dashboard</code> element expects a prop of say type <code>string</code> and name <code>testProp</code>. What would be the right way to pass it in? I have tried the following but none of them work correctly.</p>
  <p><code>&lt;Route path=&quot;/&quot; element={&lt;ProtectedRoute component={Dashboard}  testProp={&quot;test&quot;} /&gt;}/&gt;</code></p>
  <p><code>&lt;Route path=&quot;/&quot; element={&lt;ProtectedRoute component={Dashboard}  props={{testProp: &quot;test&quot;}} /&gt;}/&gt;</code></p>
  <p>Can someone please provide an example of how to forward the props to the <code>ProtectedRoute</code> so that it can be used as a generic wrapper? I am new to react and typescript and I am not able to figure out the right approach for this.</p>
  <p><strong>Edit:</strong></p>
  <p>With the second approach I get the following error in typescript</p>
  <pre><code>(property) ProtectedRouteProps.component: React.ComponentType&lt;{}&gt;
  Type '({ testProp }: Props) =&gt; JSX.Element' is not assignable to type 'ComponentType&lt;{}&gt;'.
    Type '({ testProp }: Props) =&gt; JSX.Element' is not assignable to type 'FunctionComponent&lt;{}&gt;'.
      Types of parameters '__0' and 'props' are incompatible.
        Property 'testProp' is missing in type '{ children?: ReactNode; }' but required in type 'Props'.ts(2322)
  </code></pre>