Axios strange behavior on get

I am facing a strange behavior from Axios, maybe, no for sure it is my wrong but I can when I did wrong.

here is an example of my sh*t xD

backend files

Router.js

{...}
router.get("/userbooks/:uid", getUserBooks)
router.get("/userbooks/:uid/:bid", getUserBookSummary)
router.get("/userbooks/book/:bid", getUserBookDetails)

Controllers.js

{...}
exports.getUserbooks = async (req, res, next) =>{
 console.log("get all books request")
}

exports.getUserBookSummary = async (req, res, next) =>{
  console.log("get 1 book summary")
}

exports.getUserBookDetails = async (req, res, next) =>{
  console.log("get the book details of the summary book's id")
}

frontend files

Page1.js

{...}
//inside the useEffect
axios
  .get(`/api/v1/userbooks/${uid}`, config)
  .then((res)=>setBooks(res.data.data))
  .then(()=>{
    const bookIdRequestArray = {...}
    axios
     .all(bookIdRequestArray)
     .then(
       axios.spread((..response)=>setBooksRows(formatBooksData(response)))
       .catch(e => setError(e))
   })
   .catch(e => setError(e))
{...}

This part of the code works fine, sure it can be refactored but it works fine

first `.get` receive an Array of id `["01", "02", "03"]
then the array is transformed the get an Array of Promises,
and Axios does the magic part to get all book's IDs Summary

so in my terminal, I will get

get all books request
get 1 book summary
get 1 book summary
get 1 book summary

My problem comes on page 2

Page2.js

{...}
//inside the useEffect
axios
 .get(`/api/userbooks/book/${bid}`,config)
 .then(res=>console.log(res))
 .catch(e=>console.log(e))

in my terminal I should get:

get the book details of the summary book's id

but instead, I am receiving:

get 1 book summary

Do you have any idea what's wrong with backend files?

Regards guys,