Dynamic Route in Nested Route in React Router Dom

Question

I have created a route for dashboard and some children route in it. And on of the children route have a dynamic route. I am trying to navigate to the dynamic route But the dynamic route is not working when I navigate to it by clicking on a button. Instead of going to the details page, the route on browser is only changing, without going to the details page.

Here is my Route:

<Route path='/dashboard' element={
            <AdminRoute>
              <Dashboard />
            </AdminRoute>}>                
            <Route path='add-product' element={<AddAProduct />}></Route>           
            <Route path='manage-products' element={<ManageProducts />}>
              <Route path=':id' element={<Details />}></Route>
            </Route>

          </Route>

And here is my ManageProducts component, where I am passing the data to another component named:ManageProductTable :

return priceFilter.map(
            (item) => (
                <ManageProductTable key={item._id} part={item} />
            )
        )

Here is my ManageProductTable Component:

const ManageProductTable = ({ part }) => {
    const navigate = useNavigate()


    const goToPurchase = () => {
        navigate(`${part._id}`)
    }
    const partImg = `https://leviathan-server-1.onrender.com/${part.photo}`

    return (
        <tr>
            <th>
                <label>
                    <input type="checkbox" className="checkbox" />
                </label>
            </th>
            <td>
                <div className="flex items-center space-x-3">
                    <div className="avatar">
                        <div className="mask mask-squircle w-12 h-12">
                            <img src={partImg} alt={part.name} />
                        </div>
                    </div>
                    <div>
                        <div className="font-bold">{part.name}</div>
                        {/* <div className="text-sm opacity-50">United States</div> */}
                    </div>
                </div>
            </td>
   
            <th>
                <button className="btn btn-ghost btn-xs" onClick={goToPurchase}>
                    <MdOutlineRemoveRedEye size={20} />

                </button>
            </th>
        </tr>
    );
};

export default ManageProductTable;

And this is my Details Component:

const Details = () => {
    const [purchase, setPurchase] = useState([])
    const params = useParams();
    console.log(params._id);
    useEffect(() => {
        fetch(`https://leviathan-server-1.onrender.com/api/parts/${params._id}`)
            .then(res => res.json())
            .then(data => setPurchase(data))
    }, [])
    console.log(purchase);
    return (
        <div>
            <h1 className="text-gray-900 text-3xl title-font font-bold mb-1">{purchase.name}</h1>
        </div>
    );
};

But whenever I click on the button component does not change, the route in the browser shows like this:http://localhost:3000/dashboard/manage-products/65ec468fa96fa3ac2ea9aca3

What is the solution?