파트 2. 컴포넌트 인 컴포넌트 관련 (재고감소 질문)

안녕하세요. 재고감소 구현중인데 아무리 해봐도 구현이 안되서 질문 올립니다.

App.js
function App() {

...중략...

let [재고, 재고변경] = useState([10,11,12])

return (
...중략...
 
</Route>
<Route path = "/detail/:id">
<Detail shoes={shoes} 재고={재고} 재고변경={재고변경}></Detail>
</Route>

--------------------------------------------------------------
Detail.js
function Detail(props){

...중략... 
function 재고감소(){
let newStock = [...props.재고];
newStock--;
props.재고변경(newStock);
}

return(
<Info 재고={props.재고} ></Info>
<button className="btn btn-danger" onClick={()=>{ 재고감소() }}>주문하기</button>
<button className="btn btn-danger" onClick={()=>{
history.goBack();
}}>뒤로하기</button>
...중략...

디테일로 이동시 처음 화면은 잘 출력되는데 재고감소버튼 클릭시 위와 같은 에러가뜹니다.

바쁘실텐데 감사합니다.