React js not navigating to pages using react router

If I type anything in my http://localhost:3000/anything it will do the same as if I type home or / or login, nothing. The page will be blank.

My social.js:

import React, { Component } from 'react';
import { Route, Switch } from 'react-router-dom';

import Home from '../../containers/Pages/Home/Home';
import Login from '../../containers/Pages/Login/Login';

class Social extends Component {
    render () {
        return (
            <div>
                <Switch>
                    <Route path="/home" exact component={Home} />
                    <Route path="/login" exact component={Login} />
                </Switch>
            </div>
        );
    }
}

export default Social;

app.js:

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

import Layout from './Layout/Layout'
import Social from './containers/Pages/Social';

class App extends Component {
  render() {
    return (
    <BrowserRouter>
        <div className="App">
        <Layout>
            <Social />
        </Layout>
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

Any ideas what is wrong? Thanks.

----- Edit, I notice when I remove <Layout> ... </Layout> from app.js it works.

my Layout.js:

import React, { Component } from 'react';

import Toolbar from '../components/Navigation/Toolbar/Toolbar';

class Layout extends Component {
    
    render() {
        return (
        <>
            <Toolbar />
        </>
        );
    }
}

export default Layout;

and Toolbar:

import React, { Component } from 'react';

import classes from './Toolbar.module.css';

class toolbar extends Component {
    
    render() {
        return(
        <>
            <header className={classes.Toolbar}>
                toolbar
            </header>
        </>
        );
    }
    
}

export default toolbar;