title: How to pass props to HOC from calling component - React + Typescript
body: <p>i created new PublicClientApplication in my index.tsx. Now I want to pass this to my withAuthHOC. This HOC is using by the App.tsx. So i want to use the PublicClientApplication (pca props) in HOC. How can I do it?</p>
  <p>My AppProps.tsx:</p>
  <pre><code>export type AppProps = {
      pca: IPublicClientApplication
    };
  </code></pre>
  <p>My index.tsx:</p>
  <pre><code>const msalInstance = new PublicClientApplication(msalConfig);
  
  ReactDOM.render(
    &lt;React.StrictMode&gt;
      &lt;App pca={msalInstance} /&gt;
    &lt;/React.StrictMode&gt;,
    document.getElementById('root')
  );
  </code></pre>
  <p>My App.tsx:</p>
  <pre><code>  const App = ({pca}:AppProps) =&gt; {
    return (
        &lt;MainRoutes /&gt;
    );
  }
  
  export default withAuthHOC(App);
  </code></pre>
  <p>My withAuthHOC.tsx:</p>
  <pre><code>const withAuthHOC = (WrappedComponent: React.FunctionComponent) =&gt; {
      return () =&gt; {
          useMsalRedirect();
  
          return (
              &lt;MsalProvider instance={pca}&gt;
                  &lt;AuthenticatedValidation /&gt;
                  &lt;AuthenticatedTemplate&gt;
                      &lt;WrappedComponent /&gt;
                  &lt;/AuthenticatedTemplate&gt;
              &lt;/MsalProvider&gt;
          );
      }
  };
  
  export default withAuthHOC;
  </code></pre>