Reactjs ADAL plugin not showing protected component

I am trying to perform some CRUD operations over the Dynamics 365 CRM WebApi by using Active Directory plugin and after following all the steps documented in the package page I can't see the protected route.

I have followed all the steps mentioned in the package page, except the REDUX part. Therefore my code looks like the following:

index.js:

import './index.css';

import { runWithAdal } from 'react-adal';
import { authContext } from './adalConfig';

const DO_NOT_LOGIN = true;

runWithAdal(authContext, () => {
    // eslint-disable-next-line
    require('./indexApp.js');
}, DO_NOT_LOGIN);

indexApp.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(
    <App />,
    document.getElementById('root'),
);

adalConfig.js:

import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';

export const adalConfig = {
    tenant: 'mytenantid',
    clientId: 'myclientid',
    endpoints: {
        api: 'myapiid'
    },
    cacheLocation: 'localStorage',
};

export const authContext = new AuthenticationContext(adalConfig);

export const adalApiFetch = (fetch, url, options) => adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);

My protected component:

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
import { withAdalLoginApi } from '../../adalConfig';

import ClientesPotenciales from './ClientesPotenciales/ClientesPotenciales';
import Loading from '../Loading/Loading';
import Error from '../Error/Error';

const ClientesPotencialesProtegido = withAdalLoginApi(
    ClientesPotenciales, 
    () => <Loading />, 
    error => <Error error={error} />);

class Entidades extends Component {
    render() {
        return(
            <div>
                <h1>Entidades</h1>
                <Link to="/leads">Clientes Potenciales</Link>
                <Route path="/leads" render={ () => <ClientesPotencialesProtegido /> } />
            </div>
        );
    }
}

export default Entidades;

So, when I click on the <Link to="/leads">Clientes Potenciales</Link> which only has an <h1>Hello world</h1> for testing purposes but I don't see nothing but the App component:

class App extends Component {
  render() {
    return (
      <Router>
        <div>
          <NavMenu />

          <Route path="/" exact component={Inicio} />
        </div>
      </Router>
    );
  }
}

export default App;

And the URL has changed to http://localhost:3000/leads.

Any ideas on what is wrong with this?