En mi opinión, solo Layout debería estar dentro de la carpeta containers, Login.jsx y RecoveryPassword.jsx son páginas, por lo que deberíamos moverlas a la carpeta nueva pages.

// creamos 2 páginas sencillas
// Home.jsx
import React from 'react';

const Home = () => {
    return (
        <div>
            <h1>React Shop</h1>
        </div>
    );
}

export default Home;

// NotFound.jsx
import React from 'react';

const NotFound = () => {
    return (
        <div>
            No encontrado, error 404.
        </div>
    );
}

export default NotFound;
// ambas dentro de la carpeta pages

Webpack necesita un poco de modificación

module.exports = {
    output: {
        publicPath: '/'
    },
		devServer: {
        historyApiFallback: true,
    }
} 

Editemos App.jsx

¿Por qué al momento de compilar, tenemos NotFound y a Home en la misma página?

En la aplicación, estábamos anteponiendo la etiqueta Switch ante Layout. El problema recae en que Switch estaba reconociendo a Layout como ruta que es válida, y solamente esta porque era la única hija de switch. Es decir, no tenía mas opción que mostrar a Layout. En ello, layout renderea a las 2 páginas. Por ello, cambiamos a Layout en primer lugar y después a Switch. Para que switch seleccionara la única página que corresponda, y esa única página sea organizada por Layout.

import Home from '../pages/Home';
import NotFound from '../pages/NotFound';

const App = () => {
    return (
        <BrowserRouter>
            <Layout>
                <Switch>
                    <Route exact path="/" component={Home} />
                    <Route exact path="/login" component={Login} />
                    <Route exact path="/recovery-password" component={Recoverypassword} />
                    <Route component={NotFound} />
                </Switch>
            </Layout>
        </BrowserRouter>
    );
}

<aside> 💡 Reto: página 404

</aside>

import React from 'react';
import '../styles/NotFound.scss';
import { Link } from 'react-router-dom';

const NotFound = () => {
    return (
        <div className="errorDialogue">
            <h1 className="tracking-in-contract-bck-top">¡Error!</h1>
            <h1 className="focus-in-contract-bck">404</h1>
            <h3 className="text-shadow-pop-top">Página no encontrada  &#128549;</h3>
            <Link to="/" className="home-page-link">Regresa a la página de inicio</Link>
        </div>
    );
}

export default NotFound;

// scss
.errorDialogue {
    position: absolute;
    height: 100vh;
    width: 100vw;
    text-align: center;
    background-color: var(--hospital-green);
}

.tracking-in-contract-bck-top {
    margin-top: 0px;
    margin-bottom: 0px;
    padding-top: 27vh;
    font-size: 50px;
	animation: tracking-in-contract-bck-top 1s cubic-bezier(0.215, 0.610, 0.355, 1.000) both;
}

.focus-in-contract-bck {
    margin-top: 0px;
    margin-bottom: 25px;
    font-size: 130px;
	animation: focus-in-contract-bck 1s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

.home-page-link {
    color: black;
    text-decoration: none;
}

.text-shadow-pop-top {
    margin-top: 0px;
	animation: text-shadow-pop-top 1s reverse both;
}

@keyframes tracking-in-contract-bck-top {
    0% {
        letter-spacing: 1em;
        transform: translateZ(400px) translateY(-300px);
        opacity: 0;
    }
    40% {
        opacity: 0.6;
    }
    100% {
        transform: translateZ(0) translateY(0);
        opacity: 1;
    }
}

@keyframes focus-in-contract-bck {
    0% {
      letter-spacing: 1em;
      transform: translateZ(300px);
      filter: blur(12px);
      opacity: 0;
    }
    100% {
      transform: translateZ(12px);
      filter: blur(0);
      opacity: 1;
    }
}

@keyframes text-shadow-pop-top {
    0% {
      text-shadow: 0 0 var(--dark-grey), 0 0 var(--dark-grey), 0 0 var(--dark-grey), 0 0 var(--dark-grey), 0 0 var(--dark-grey), 0 0 var(--dark-grey), 0 0 var(--dark-grey), 0 0 var(--dark-grey);
      transform: translateY(0);
    }
    100% {
      text-shadow: 0 -1px var(--dark-grey), 0 -2px var(--dark-grey), 0 -3px var(--dark-grey), 0 -4px var(--dark-grey), 0 -5px var(--dark-grey), 0 -6px var(--dark-grey), 0 -7px var(--dark-grey), 0 -8px var(--dark-grey);
      transform: translateY(8px);
    }
}