Using react-loadable to set up routes for components

Question

I'm trying to use react-loadable to dynamically import components.

I've a config file like this:

Manifest.ts

export let manifest = {
  apps: [
    {
      componentPath: "/Test/App",
      path: "/test",
      name: "Test"
    },
   ...more objects for other apps
  ]
};

I've a AppRoutesList.tsx file where I register routes for components by making use of react-loadable.

export default function AppRoutesList() {
   const LoadableComponent = (path: string) =>
    Loadable({
      loader: () => import(path),
      loading: () => <div>Loading</div>
    });

  return (
    <React.Fragment>
      {manifest.apps.map(app => (
        <RedirectIfAuthenticated
          key={app.name.toString()}
          path={app.path}
          component={LoadableComponent(`../${app.appPath}`)}
          redirectPath={"/"}
          isAuthenticated={true}
        />
      ))}
    </React.Fragment>
  );
}

so for the above config, it should register /test path to load the component (default export) at location "./Test/App.tsx"

But when I do go to this route, I only see the Loading text. In chrome inspector, I see the props being passed to RedirectIfAuthenticated component, and the component prop is not being passed:

This means my LoadableComponent is not returning the actual component here. I am not sure how to fix this. Thanks.

Extra info:

The RedirectIfAuthenticated component has following code:

interface IRedirectIfAuthenticatedProps extends RouteProps {
  readonly isAuthenticated: boolean;
  readonly redirectPath: string;
  readonly component: React.ComponentClass<any> | React.StatelessComponent<any>;
}

export default function RedirectIfAuthenticated({
  component,
  redirectPath,
  isAuthenticated,
  ...rest
}: IRedirectIfAuthenticatedProps) {
  const Component = component;

  // tslint:disable-next-line:no-any
  const render = (renderProps: RouteComponentProps<any>) => {
    let element = <Component {...renderProps} />;

    if (!isAuthenticated) {
      element = (
        <Redirect
          to={{
            pathname: redirectPath,
            state: { from: renderProps.location }
          }}
        />
      );
    }

    return element;
  };

  return <Route {...rest} render={render} />;
}