How to map a filter of a string value in an array of strings

I have an app built with React and Express Node, and in it I have 3 separate components. The first component is a gallery, where user selects an image to create a post with an background image. When button is clicked, user is taken to a form. The user will edit the inputs with some text and save the form which has a axios.post request to send the data to mongo db through express route. After saving user clicks view post that takes them to another component with axios.get request displaying image and input data to the user.

I have routes that have a unique http path to show the component that is active. My question is how can I map the routes to dynamically load the name of the image that comes from mongodb collection, instead of manually writing in the paths image name ie: path={"/getinputwaterfall/:id"}, path={"/getinputcross/:id"}, path={"/getinputfreedom/:id"} . I would like to have instead somthing like: path={"/getinput{urlName}/:id"}.

In the mongoDB collection I have a URL and name string array. The URL string is an http path from firebase and the name string are images names.

Is this possible to do? Bellow is the code and my attempts to do this.

import React, {useState, useEffect} from "react";
import { BrowserRouter as Router, Route, Switch } from "react-router-dom";
import axios from "axios";
import "bootstrap/dist/css/bootstrap.min.css";
import "./index.css";

//gallery imports
import Cross from "./Components/Gallery/posts/Cross";
import Waterfall from "./Components/Gallery/posts/Waterfall";
import Freedom from "./Components/Gallery/posts/Freedom";

import CrossPost from "./Components/Gallery/get/CrossPost";
import WaterfallPost from "./Components/Gallery/get/WaterfallPost";
import FreedomPost from "./Components/Gallery/get/FreedomPost";


function App() {
  const [name, setName] = useState([]);

  const loadImage = async () => {
  try {
    let res = await axios.get("http://localhost:5000/geturls");
    console.log(res.data)
    setName(res.data.map(n=>n.name)); //array of names
    } catch (error) {
    console.log(error);
   }
  };

   useEffect(() => {
   loadImage();
         }
    ,[]);

  return (
    <div className="App">
        <Router>
          <Switch>
           
            {/* routes for gallery */}
            <Route path={"/waterfall"} component={Waterfall} /> 
            <Route path={"/cross"} component={Cross} /> 
            <Route path={"/freedom"} component={Freedom} />

            <Route path={"/getinputwaterfall/:id"} component={WaterfallPost} /> 
            <Route path={"/getinputcross/:id"} component={CrossPost} /> 
            <Route path={"/getinputfreedom/:id"} component={FreedomPost} />
            
            {/* what I tryed to map */}
             {name.filter(name => name === `${name}` ).map((urlName) => (
            <Route exact path={`/getinputt/${urlName}`} component={CrossPost} /> 
            ))} 

          </Switch>
          </Router>
      </div>
    );
}
export default App;

update: I applied the first option of the answer to my code for those who wish to see the complete solution: Note: I had to remove the '/' in /getinput/${name}/:id to make my code work! Thanks Drew!

  const imagePostRoutes = [
    { name: "cross", component: CrossPost },
    { name: "freedom", component: FreedomPost },
    { name: "waterfall", component: WaterfallPost },
  ];
  
  return (
    <div className="App">
      <Router>
        <Switch>
          {imagePostRoutes.map(({ component, name }) => (
            <Route
              key={name} path={`/getinput${name}/:id`} component={component}
            />
          ))}
        </Switch>
      </Router>
    </div>
  );
}