title: Why am I getting this error on okta-react Security component?
body: <p>I am trying to implement Okta into the project I am working on and following the instructions posted here <a href="https://www.npmjs.com/package/@okta/okta-react" rel="nofollow noreferrer">https://www.npmjs.com/package/@okta/okta-react</a>, I added the following in the Router of the project,</p>
  <pre><code>import React from 'react';
  import HelloWorld from '@root/components/HelloWorld';
  import { BrowserRouter, Route, Switch } from 'react-router-dom';
  import { SecureRoute, Security, LoginCallback } from '@okta/okta-react';
  import { OktaAuth } from '@okta/okta-auth-js';
  
  const TestPage = () =&gt; {
      return (
          &lt;div&gt;
              &lt;h1&gt;This is my test page!!!&lt;/h1&gt;
          &lt;/div&gt;
      )
  }
  
  const Protected = () =&gt; {
      return (
          &lt;div&gt;
              &lt;h1&gt;Protected page&lt;/h1&gt;
          &lt;/div&gt;
      )
  }
  
  const oktaDomain = // Added my okta domain here
  const clientId = // Added my client id here
  const oktaAuth = new OktaAuth(
      {
          issuer: `https://${oktaDomain}.com/oauth2/default`,
          clientId: `${clientId}`,
          redirectUri: window.location.origin + '/login/callback'
      }
  )
  
  
  const AppRouter = () =&gt; {
      return (
          &lt;BrowserRouter&gt;
              &lt;Security
                  oktaAuth={oktaAuth}
              &gt;
                  &lt;Route path=&quot;/&quot; component={HelloWorld} exact={true} /&gt;
                  &lt;Route path=&quot;/test&quot; component={TestPage} exact={true} /&gt;
                  &lt;SecureRoute path='/protected' component={Protected} /&gt;
                  &lt;Route path='/login/callback' component={LoginCallback} /&gt;
              &lt;/Security&gt;
          &lt;/BrowserRouter&gt;
      )
  };
  
  export default AppRouter;
  </code></pre>
  <p>So This is how my AppRouter.tsx looks like,</p>
  <p>If I remove this Security component layer I can see the app without any errors, but if I add Security back as the example shows I get the following error,</p>
  <blockquote>
  <p>Uncaught TypeError: Object(...) is not a function
  at Security (Security.tsx:38)</p>
  </blockquote>
  <p>If I click to see the line that failed I see:</p>
  <p><a href="https://i.stack.imgur.com/tso5i.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tso5i.png" alt="enter image description here" /></a></p>
  <p>What Am I missing Here?</p>
  <p>Thank you in Advance )</p>