React routing not loading pages

Hi i am learning react and i got stuck on a problem. i have started working on routing but its not working at all. Code:

 import {Route} from 'react-router-dom'
import AllMeetupsPage from './pages/AllMeetups';
import NewMeetupsPage from './pages/NewMeetups';
import FavoritesPage from './pages/Favorites';


function App() {
  return (
      <div>
        <Route path = '/'>
          <AllMeetupsPage />
        </Route>
        <Route path = '/new-meetup'>
          <NewMeetupsPage />
        </Route>
        <Route path = '/favorites'>
          <FavoritesPage />
        </Route>
      </div>
  );
}

export default App;

i have a blank screen even though the pages should load. Each page when open should only print one line just to see that i can see routing working however all i see is a blank space meaning its not working correctly.You can view the full code here: https://github.com/Kroplewski-M/Routing
thank you in advance