"(AppContainer)RangeError: Maximum call stack size exceeded" - React with react hot loader

I am struggling with really strange error and I did not find the solution for last 2 hours so I decided to ask for help.

I have setup of React, Redux, Webpack, React Hot Loader, all with TypeScript.

I have used a boilerplate, but after I ran into this issue I changed webpack config to reflect example from RHL repo.

It is compiling properly but I cannot get protected route working because if user is authenticated, so it is supposed to render provided component, it is throwing error from the title of this question.

This is my ProtectedRoute component:

import React, { Component, FunctionComponent } from 'react';
import { Redirect, Route } from 'react-router';
import { isAuthenticated } from './auth';

interface IProps {
  component: Component | FunctionComponent;
  path: string;
}
const ProtectedRoute: FunctionComponent<IProps> = ({ component, ...rest }) => (
  <Route
    {...rest}
    render={(props) => {
      if (isAuthenticated()) {
        console.log('should render', component);
        return <Component />;
      }
      return <Redirect to="/login" />;
    }}
  />
);

export default ProtectedRoute;

Simple like that.

I am trying to just use:

<ProtectedRoute path="/dashboard" component={() => <div>Test</div>} />

isAuthenticated is a crazy simple function so far:

export const isAuthenticated = () => {
  const accessToken = localStorage.getItem(ACCESS_TOKEN_STORAGE_KEY);
  console.log('checking auth');
  if (accessToken) {
    return true;
  }
  return false;
};

I can pass anything to the protected route and it will always throw:

(AppContainer)RangeError: Maximum call stack size exceeded

This is the call stack:

react-hot-loader.development.js?2cd8:2202 Uncaught RangeError: Maximum call stack size exceeded at renderReconciler (react-hot-loader.development.js?2cd8:2202) at Object.asyncReconciledRender [as componentWillRender] (react-hot-loader.development.js?2cd8:2220) at Component.hotComponentRender (react-hot-loader.development.js?2cd8:718) at Component.proxiedRender (react-hot-loader.development.js?2cd8:750) at Component.hotComponentRender (react-hot-loader.development.js?2cd8:730) at Component.proxiedRender (react-hot-loader.development.js?2cd8:750) at Component.hotComponentRender (react-hot-loader.development.js?2cd8:730) at Component.proxiedRender (react-hot-loader.development.js?2cd8:750) at Component.hotComponentRender (react-hot-loader.development.js?2cd8:730) at Component.proxiedRender (react-hot-loader.development.js?2cd8:750)

I have really no idea what is going on.

I have tried to change the config:

setConfig({
    logLevel: 'debug',
    ignoreSFC: true, // the same error
    pureRender: true // change error to instance.render is not a function
  });

but it does not help.

I will really appreciate any help.

The repo with replicated issue: https://github.com/murbanowicz/rhl-issue

ProtectedRoute's render method returns React.Component instead of component passed to it in props.