Rendering conditionally in React

I want to render two completely separate components based on whether the user is logged in or not. This is my code,
import React, {Component} from 'react';
import ContainerLogged from './components/logged/ContainerLogged'
import ContainerUnlogged from './components/unlogged/ContainerUnlogged'

class App extends Component {
    constructor(props){
        super(props)
        this.state = {isLoggedIn : false}
    }
    render(){
        const comp = this.state.isLoggedIn ? (
            <ContainerLogged />
        ): (
            <ContainerUnlogged />
        );
        return (

            {comp}
        );
    }
}
export default App;
This is my index.js
import 'normalize.css';
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();
I get the following error,
Objects are not valid as a React child (found: object with keys {comp}). If you meant to render a collection of children, use an array instead.
    in App (at index.js:8)
I'm new to React and thus dont understand what's going on over here.