estoy utilizando el hook de useParams pero este me devuelve undefined, en lugar de devolverme un número. 

     const App = () => {
     return (
    
       <BrowserRouter> 
       <Navegador/>
       <Routes>
       
      <Route path='/' element= {<ItemListContainer/>}/>

    <Route path='/productos/:categoriaId'  element= {<ItemListContainer/>}/>
    <Route path='/item/:itemId'  element= {<ItemDetailContainer/>}/> 
       
       </Routes>
      </BrowserRouter>
    
     )
    }

Aqui utilizo el useParam para obtener el itemId.

    import { useEffect, useState } from "react"
    import { pedirDatos } from "../../helpers/pedirDatos"
    import { useParams } from 'react-router-dom'
    import '../../assets/styles/item.css'
    import ItemDetail from "../ItemDetail/ItemDetail"


    export const ItemDetailContainer = () => {
    const { itemId } = useParams();

    const [item, setItem] = useState(null)
    const [loading, setLoading] = useState(true)

    console.log(item);

    useEffect(() => {
        setLoading(true)
        pedirDatos()
            .then((res) => {
                setItem(res.find((prod) => prod.id === Number(itemId) ))
            })
            .catch(err => console.log (err))
            .finally(() => {
                setLoading(false)
            })
    }, [itemId, setLoading])

    return (

        <div>

            {loading ? <div className="spinner"></div>
                : <ItemDetail item={item} />}
        </div>
     )
    }

Si hago un console.log del itemId me sale "NaN" y si le saco el parseo a número me sale la palabra "id".. no sé como arreglarlo. 
Debería dar como resultado un número que coincida con prod.id, pero por alguna razón no lo esta tomando así..