ReactJS Route function isn’t working for me

I started learning ReactJS yesterday using Academind’s crash course for beginners on it. There is a part where he teaches about react-router-dom. I tried using it on App.js and index.js as such:

App.js:

import { Route } from "react-router-dom";

import AllMeetupsPage from "./pages/AllMeetups";
import FavouritesPage from "./pages/Favourites";
import NewMeetupsPage from "./pages/NewMeetups";

function App() {
  return (
    <div>
      <Route path='/'>
        <AllMeetupsPage />
      </Route>
      <Route path='/favourites'>
        <FavouritesPage />
      </Route>
      <Route path='/new-meetups'>
        <NewMeetupsPage />
      </Route>
    </div>
  );
}

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'

import './index.css';
import App from './App';

ReactDOM.render(
  <BrowserRouter>
    <App />
  </BrowserRouter>,
  document.getElementById('root')
);

There shouldn’t be any error since I have fixed the syntax and imported the right files given in the video. Yet, in localhost:3000 I get this as the result.

If I just use <AllMeetupsPage /> then it works. If I put it in the route function then it doesn’t. How can I fix this?