How to link an image to a page dynamically with React Router Dom?

I have an image gallery for a website portfolio and I’m trying to make each image link to a different page in React with react-router-dom, but I can’t seem to understand what’s wrong with the code.

Been busting my head for the last 3 days with this, trying different approaches but to no avail. Can someone help me please? I'm fairly new to coding.

This my app page where I declared my routes

import './App.css';
import { BrowserRouter as Router, Routes, Route} from "react-router-dom";
import Inicio from './components/Routes/Inicio/Inicio';
import Trabalhos from './components/Routes/Trabalhos/Trabalhos';
import Navbar from './components/Navbar/Navbar';
// import Footer from './components/Footer/Footer';
import Contactos from './components/Routes/Contactos/Contactos';
// import ErrorPage from './components/Routes/ErrorPage/ErrorPage';
import Imagem from './components/Routes/Trabalhos/Imagem';


function App() {
  return (
    <Router>
      <Navbar/>
      <Routes>
        <Route path="/" element={<Inicio/>} />
        <Route path="trabalhos" element={<Trabalhos/>} />
        <Route path=":imagemid" element={<Imagem/>} /> 

            
        <Route path="contactos" element={<Contactos/>}/>
        {/* <Route path="*" element={<ErrorPage/>} />  */}
      </Routes>
      {/* <Footer /> */}
    </Router>
  );
}

export default App;

The gallery page:

import React from 'react';
import "./trabalhos.css";
import thumbnails from '../../thumbnails';
import Thumbs from './Thumbs';
import { Link } from "react-router-dom";


function Trabalhos() {


   
    return (
        <div className="trabalhos">
        
              {thumbnails.map((novaImagem)=> (
                    <Link to ={`imagemid/${novaImagem.nome}`}>
                    
                          {<Thumbs 
                            key = {novaImagem.key}
                            url = {novaImagem.url}
                            nome = {novaImagem.nome}
                            titulo = {novaImagem.titulo}
                            desc = {novaImagem.desc}
                        /> }
                   </Link>

            ))}  
        </div>
    )
}

export default Trabalhos

The component I'm importing and mapped in the gallery page. The information I'm mapping is on a seperate js file.

import React from 'react';



function Thumbs(props) {
    
    return (
        <div className="thumbs">

            
         
            <img src={props.url} alt={props.nome} />
              
                 <div className="contentor">
                 
                    <h3>{props.titulo}</h3>
                    <p>{props.desc}</p>
                    
                </div>
                
            
        </div>
    )
}

export default Thumbs;

The page I want to render dynamically

import React from 'react';
import "./imagem.css";
import { useParams } from "react-router-dom"; 


function Imagem() {

    const { imagemid } = useParams();

    return (
        <div className="imagem">
            <h1>The work name is - {imagemid}</h1>
        </div>
    )
}

export default Imagem

Thanks in advance.