I have one component:

```
import React from 'react';

import Footer from '../Footer';
import AddTodo from '../../containers/AddTodo';
import VisibleTodoList from '../../containers/VisibilityTodoList';

const App = () => (
  <div>
     <AddTodo />
     <VisibleTodoList />
     <Footer />
  </div>
);

export default App;

```

and I have another one:

```
import React from 'react';
import App from './../../App/';
// import Footer from '../../Footer';

const Body = () => (
  <div>
    <App />
  </div>
);
export default Body;

```

Notice this second one is just a component that wraps another component....

I keep on getting the following error with, `RangeError: Maximum call stack size exceeded`

```
const routes = (
  <Route path="/" component={TopNavBar}>
    <IndexRoute component={Body} />
  </Route>
);
export default routes;

```

However, if I change it to instead:

```
const routes = (
      <Route path="/" component={TopNavBar}>
        <IndexRoute component={App} />
      </Route>
    );
    export default routes;

```

It works just fine. Notice the only difference is that the first one, with the index route as "Body", is just a functional component that wraps the functional App component. Why is that causing a maximum call stack size error?