Route안의 Props가 업데이트 되지 않는 경우?

쇼핑몰 만드는 예제를 보고 있는데요.

<Route path="/" element={}/>
위 default 페이지에서 더보기 버튼을 누르면 useState로 지정된 shoes에 3개의 데이터를 받아와 추가해주도록 하는 코드를 짰습니다.
(setShoes[...]) 이런식으로요.

이거 다음에

<Route path="/detail/:id" element={<Detail shoes={shoes} />}></Route>

이렇게 해주니까.. path가 "/"일 때 shoes데이터가 6개가 되었음을 console.log로 확인이 되었는데,

신발 이미지를 클릭해 Detail페이지로 넘어가면 shoes데이터가 다시 3개가 되면서

4번째 신발부터 동작이 되지 않습니다..

"/" 페이지에서 출력한 shoes

(6) [{…}, {…}, {…}, {…}, {…}, {…}]
0: {id: 0, title: 'White and Black', content: 'Born in France', price: 120000}
1: {id: 1, title: 'Red Knit', content: 'Born in Seoul', price: 110000}
2: {id: 2, title: 'Grey Yordan', content: 'Born in the States', price: 130000}
3: {id: 3, title: 'Flowey', content: 'only 5 inches', price: 120000}
4: {id: 4, title: 'Baby shoes', content: 'for less than 6', price: 120000}
5: {id: 5, title: 'Red Herring', content: 'Born in France', price: 120000}
length: 6

Detail로 넘어간 뒤에 출력된 shoes

(3) [{…}, {…}, {…}]
0: {id: 0, title: 'White and Black', content: 'Born in France', price: 120000}
1: {id: 1, title: 'Red Knit', content: 'Born in Seoul', price: 110000}
2: {id: 2, title: 'Grey Yordan', content: 'Born in the States', price: 130000}
length: 3

이게 redux toolkit을 이용하면 해결이 될 것 같긴한데.. props 관점에서

Route A에서 업데이트 된 State S가

Route B에 props에도 들어갈 경우, A에서 업데이트 된 값이 B에 들어가도록 하려면 어떻게 해야할까요..?

이게 안 되어서, 4번째 신발부터는 위 화면이 정상적으로 안 뜨고, 빨간 글씨로 오류가 뜹니다.(undefined)