Esto pudiera ser porque como esta el Dashboard.js tienes que engloblar tus rutas "Route" en el componente BrowserRouter que generalmente le cambian el nombre a router generando que tengas este componente "Router" te dejo un ejemplo de como tengo mi aplicación para que te des una idea amigo:
import React from 'react';
import {
BrowserRouter as Router,
Switch,
Route,
Redirect
} from "react-router-dom";
import Navbar from './Navbar';
import MemoriesCreate from '../memories/MemorieCreate';
import MemoriesScreen from '../memories/MemoriesScreen';
const Dashboard = () => {
return (
<>
<Router>
<div>
<Navbar />
<Switch>
<Route exact path="/" component={ Home }/>
<Route exact path="/subir-recuerdo" component={ MemoriesCreate } />
<Route exact path="/recuerdos" component={ MemoriesScreen }/>
<Redirect to="/" />
</Switch>
</div>
</Router>
</>
);
}
function Home() {
return <h2>Home</h2>;
}
export default Dashboard;
ACTUALIZACION, seguí intentando resolverlo, agregue useEffect en cada componente que mostrara en consola su nombre al renderizarlo y ese botón que falla no renderiza el componente que le paso por el prop component="" si no el mismo de la ruta de crear