Reactjs – I want to create a dynamic route in react js using react-route-dom. Route will be /property-in-city/ where "city" will be dynamic

Here’s a routes I have created so far.

<BrowserRouter>
  <Routes>
    <Route path="/" exact element={<FrontPage />} />
    <Route path="/property-in-:cityName/" element={<PropertyListing />} />
    <Route
      path="/property-in-:cityName/:singlePropertySlug"
      element={<PropertySingle />}
    />
    <Route path="/associates" element={<AssociateListing />} />
    <Route path="/about-us" element={<AboutUs />} />
    <Route path="/contact-us" element={<ContactUs />} />
    <Route path="/*" element={<PageNotFound />} />
  </Routes>
</BrowserRouter>

Is there any way to achieve a partial dynamic route in React-Router-DOM where "/property-in-" will be static and ":city" will be dynamic?

I tried the above method of route but it’s not working. When I enter "/property-in-newyork/" it gives me 404 but when I type "/property-in-:cityName/" this exact route it loads the component. When I try to grab that parameter using the following method in <PropertyListing /> the component it gives me an undefined error in the console.

const { cityName } = useParams();
console.log("City:", cityName);