Javascript – show components in nested route in react

this is my code why it doesnt show sale componet? i want in the sale component access to both title & id of each book. but after click on link to go to sale nothing happens .how can i handle this issue? thank you for your help!

App.js

<Route path="/" element={<Navigate to="/login" replace />} />
<Route path="/login" element={<Login />} />
<Route path="/dashboard" element={<Layout component={Dashboard} />} />
<Routes>
  <Route path="books">
    {/* books */}
    <Route index element={<Layout component={Dashboard} />} />
    {/* /books/:title/:id" */}
    <Route path=":title/:id">
      <Route index element={<Layout component={BookDetail} />} />
      {/* /books/:title/:id" */}
      <Route path="sale" element={<Layout component={SaleStore} />} />
    </Route>
  </Route>

Dashboard

{books.map((book) => (
  <div className="col" key={book.id}>
    <div className="card h-100" >
      <div className="card-img-top pb-5 mb-5">
    </div>
    <div className="card-body">
      <Link to={`${book.title}/${book.id}`}> // "/books/:title/:id"
        <button type="submit" className="btn custome-btn purple-active-ghost w-100">
          {book.title}
        </button>
      </Link>
    </div>
  </div>
)}

detail

const { title, id } = useParams();
console.log("book Title:", title);
console.log("book Id:", id);

...

<Link to="sale"> // "/books/:title/:id/sale"
  <button type="submit" className="btn custome-btn purple-active-ghost w-100">
    go to sale
  </button>
</Link>