I have created a custom page with path "/:name" inside a nested route. I expected the output to be Hello, my friend {name}, instead I am getting an error saying ERR_ABORTED 404 (Not Found). How do I fix this?

Route Page

import React from 'react'
import { Routes, Route } from 'react-router-dom'
import HomePage from './Pages/HomePage'
import OtherPage from "./Pages/OtherPage"
import ErrorPage from './Pages/ErrorPage'
import MainProduct from "./Pages/projects/MainProduct"
import FirstProduct from "./Pages/projects/otherProduct/FirstProduct"
import SecondProduct from "./Pages/projects/otherProduct/SecondProduct"
import CustomProduct from "./Pages/projects/otherProduct/CustomProduct"
import MainNavComponent from './Components/MainNavComponent'

export default function App() {
    return (
        <div>
            <MainNavComponent />
            <Routes>
                <Route path='/' element={<HomePage />} />
                <Route path='/mainProduct' element={<MainProduct />}>
                    <Route path='firstProduct' element={<FirstProduct />} />
                    <Route path='secondProduct' element={<SecondProduct />} />
                    <Route exact path=":name" element={<CustomProduct />} />
                </Route>
                <Route path='/otherPage' element={<OtherPage />} />
                <Route path='*' element={<ErrorPage />} />
                <Route exact path=":name" element={<CustomProduct />} />

            </Routes>
        </div>
    )
}

Custom Route Page

export default function CustomProduct() {

    let { name } = useParams()

    return (
        <div>
            <h1>Hello, my friend {name}</h1>
        </div>
    )
}