Dynamic routes not working for any routes besides ‘/’

import React from "react";
import { Home, Profile, Saved, Explore, Auth, Settings } from "./pages";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";

const App = () => {
    const routes = [
        { path: "/", component: Home },
        { path: "/profile/:id", component: Profile },
        { path: "/saved", component: Saved },
        { path: "/explore", component: Explore },
        { path: "/auth", component: Auth },
        { path: "/settings", component: Settings },
    ];
    return (
        <div className="bg-gray-200 w-full min-h-screen">
            <Router>
                <Switch>
                    {" "}
                    {routes.map((route, i) => {
                        return <Route key={i} exact path={route.path} component={route.component} />;
                    })}{" "}
                </Switch>
            </Router>
        </div>
    );
};

I can’t seem to figure this out. If I make the first path dynamic it works. But the rest of the Routes don’t work when I try and make them dynamic. Am I missing something, I checked around and looked at tutorials but couldn’t find anything I would be missing