Editing a useParams ID to use as a proper title in React

Here's my Routing

<Route path="/marvel" element={<Marvel />} />
<Route path="/marvel/:id" element={<MarvelDetail />} />

Here's my Marvel page

<a href="/marvel/captain-america-civil-war">
  Captain America: Civil War   
</a>

Here's my Detail page

const { id } = useParams();

<div className="marvel__main-topbar">
  <span className="marvel__main-title">{id}</span>
</div>

I have a main page that redirects to any number of topics relating to a specific Marvel movie. If you take a look at the Detail page code you'll notice I have a span with { id } for the title which displays at the very top of each page. The routing works fine and I'm redirected to the right page, however instead of having the title be Captain America: Civil War it makes it captain-america-civil-war. I know it does this because it's just copying the route. But how can I make each page have their own proper title instead of one that uses dashes?

What I've Tried

I changed the id to include the replace method but that didn't fully work because it doesn't know when to include a colon or any other special characters.

What you could do is create a separate file that contains an array of marvel objects with the id AND the proper title like so :

marvelDetails.js

const marvelDetails = [
  {
    id: 'captain-america-civil-war',
    title: 'Captain America: Civil War'
  },
];

In your Details page:

const {id} = useParams();

// Don't forget to import the marvelDetails.js file
const title = marvelDetails.find((detail) => detail.id === id).title

<div className="marvel__main-topbar">
  <span className="marvel__main-title">{title}</span>
</div>