Why is react router not displaying the required element?

Question

import React from 'react';
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';
import './App.css';
import Chat from './Chat';
import Sidebar from './Sidebar';

function App() {
  return (
    <div className="app">
      <div className="app__body">
        <Router>
          <Switch>
            <Sidebar/>
            <Route exact path="/">
              <h1>This is home screen</h1>
            </Route>
            <Route path="/rooms/:roomId">
              <Chat/>
            </Route>
          </Switch>
        </Router>
      </div>
    </div>
  );
}

export default App;

The code is showing the sidebar properly..But its neither displaying 'This is home screen' on default home page nor the component when I change url to room/someid..According toz this answer I even added exact before the path. Why is Route not working?