how to call components from components lazy loaded

[Princezhm]

Hello, I'll describe my current problem, I'm trying to implement the lazy loading feature into my project, for the moment I was unable to make it work, I'll leave the important pieces of my code:

webpack.config.js

loaders: [
      {
        test: /\.(js|jsx)$/,
        include: [paths.appSrc],
        exclude: [paths.appSrc+'/components/collateral'],
        loader: 'babel',
        query: {
          cacheDirectory: findCacheDir({
            name: 'react-scripts'
          })
        }
      },
      {
        test: /\.(js|jsx)$/,
        include: [ paths.appSrc+'/components/collateral' ],
        loaders: ['bundle?lazy', 'babel']
      }
   // ...rest of config..
]

router:

import React from 'react';
import ReactDOM from 'react-dom';
import { Router, Route, IndexRoute, browserHistory } from 'react-router'; 

import App from './App';
import Explorer from './components/collateral/Explorer';
import Balance from './components/collateral/Balance';

function getLazyComponent(component) {
    return  (loc, cb) => {
        component(comp => {
            cb(null, comp.default || comp)
        })
    }
};
 // ... some code 

<Router history={browserHistory}>
        <Route path="/home" component={App}>
                <Route path="/collateral" getComponent={getLazyComponent(Explorer)} />
         </Route>
 </Router>

now, as you can see I'm trying to render the component "Explorer" which I modified to show the code here:

import React from 'react';
import Balance from './Balance';

export default class Explorer extends React.Component {
    
    // ...rest of the code.. 

    render() {
        return (
            <div>
                <Balance />
            </div>
        );
    }
}

and this is the Balance

import React from 'react';

export default class Balance extends React.Component {

    render() {
        return (
            <div>
                 <p> some random text with balance </p>
             </div>
        );
    }
}

now, when I call http://localhost:3000/collateral trying to access the Explorer component I get this error:

Uncaught TypeError: cb is not a function
    at eval (Balance.js?./~/bundle-loader?lazy:3)

but if I modify the router to point directly to the balance it works (I mean this):
<Route path="/collateral" getComponent={component(Balance)} />

or another solution that I found was to remove the Balance component from the Explorer and replace it with something.....

so the problem is when we have some component inside one component called async, right? how can I solve this? maybe the problem is the function getLazyComponent which is not resolving the component inside Explorer.

I hope you can help me, thanks.