React Router Dom isn't rendering my pages

Question

I am trying to learn react, but I am stuck with react render dom which doesn't want to render my page.

My App.js

import React from 'react';
import { Route } from 'react-router-dom';
import './App.css';
import HomePage from './pages/homepage/homepage.component.jsx';

function App() {
  return (
    <div>
      <Route exact path='/' component={ HomePage }/>
    </div>
  );
}

export default App;

And my index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import { BrowserRouter } from 'react-router-dom';

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