React Issue with Firebase

1

I am trying to create a app, where some routes are protected and can only be accessed if the user is logged in. Otherwise, you are taken to another page.

Here is my code so far:

import React, { useContext } from 'react';
import { BrowserRouter as Router, Switch, Route, Link } from 'react-router-dom';
import firebase from './config/db';
import Caught from './components/Caught';

// Import Routes
import Login from './pages/Login';
import Dashboard from './pages/Dashboard';
import Home from './pages/Home';
import Settings from './pages/Settings';
import CreateChat from './pages/Create-Chat';
import Members from './pages/Members';
import signout from './pages/Signout';
import Chats from './pages/Chats';
import Chat from './pages/Chat';

import { ChatContext } from './config/ChatContext';

const RoutingObject = () => {
  const context = useContext(ChatContext);
  return (
    <Router>
      <div>
        <Switch>
          <Route path="/" component={Home} exact />

          {/* Auth */}
          <Route path="/auth/login" component={Login} />
          <Route path="/auth/signup" />
          <Route path="/auth/signout" component={signout} />

          {/* Profile */}
          <Route path="/members" component={Members} />
          <Route path="/member/:id" />

          {/* Chat Screens */}

          {firebase.auth().onAuthStateChanged(usr => {
            usr ? (
              <React.Fragment>
                <Route path="/dashboard" component={Dashboard} />
                <Route path="/settings" component={Settings} />
                <Route path="/chats" component={Chats} />
                <Route path="/chat/create" component={CreateChat} />
                <Route path="/chat" component={Chat} />
              </React.Fragment>
            ) : (
              <Caught />
            );
          })}

          {/* Spaces */}
          <Route path="/space/create" />
          <Route path="/space/browse" />
          <Route path="/space/:id" />
          <Route path="/space/:id/members" />

          {/* Community */}
        </Switch>
      </div>
    </Router>
  );
};

export default RoutingObject;

However, I am getting this error:

Warning: Failed prop type: Invalid prop `children` supplied to `Switch`, expected a ReactNode.

And when I remove the conditional and stuff, I dont get that error.

If anyone could help or tell me a better way to do what I am doing.

Thanks!