Although OnAuthRequired is set it still redirects me to okta login

Ok, so I have this weird problem. I want my app to redirect to /login so it would show (redirect to) my custom login component when user is not logged in and tries to access ‘/’ page. However when I go to that page while not being logged in it won’t redirect me to that page and goes straight to default okta login page. Here’s my code:

export const App = () => { 
 const history = useHistory();
 const onAuthRequired = ({history}) => {
    history.push('/login');
 };

<Security {...config} onAuthRequired={onAuthRequired}>
 <Switch>
  <Route path={CALLBACK_PATH} component={LoginCallback} />
   <Route exact path="/login" component={() => <ScreensLogin issuer={config.issuer} />}/>
   <Route exact path="/signup" component={ScreensSignup} />
   <ScreensMain>
    <SecureRoute exact path="/" component={() => <ScreensDesktop />} />
    <SecureRoute exact path="/groups" component={() => <ScreensGroups />} />
    <SecureRoute exact path="/sensors" component={() => <ScreensSensors />} />
    <SecureRoute exact path="/contact" component={() => <ScreensContact />} />
   </ScreensMain>
  </Switch>
 </Security>