No routes matched location "/cart" in router router dom v 6

Question

The when I console.log qty (in the code below), I see No routes matched location "/cart" (from browser console) instead of value of qty. In react-router-dom v5 everything works well by passing location as props to the component, but that isn't working in v6. How do I go about fixing this?

const CartScreen = () => {
    const match = useParams()
    const location = useLocation();
    const productID = match.id
    const qty = location.search ? Number(location.search.split("=")[1]): 1

    console.log('qty:', qty)


    return (
        <div>
            <h1>Add to CART</h1>
        </div>
    )
}

App.js

function App() {
    return (
    <Router>
      <Routes>
          <Route path='/cart/:id?' element={<CartScreen/>} />
      </Routes>
    </Router>
  );
}

export default App;