중괄호 질문

안녕하세요.

part 2 마지막에서 재고 숫자가 1씩 감소하는 부분을 따로 useState로 아래와 같이 작성했습니다.(질문을 위해서 간략히 올렸습니다)
코드 가장 하단의 컴포넌트 StockInfo 내부의 첫 번째 props.stock[props.idIdx]는 중괄호를 추가하니 오류가 생겼고, 두 번째 props.stock[props.idIdx]에는 중괄호를 빼니 오류가 생겼습니다.

어떤 때는 중괄호를 넣어야 하고 어떤 때는 중괄호를 넣지 말아야 하고 헷갈리는데요..

{}를 정확히 언제 언제 사용하는 지 알 수 있을까요?

function Detail(props) {

  let { id } = useParams();
  let [idIdx, setIdIdx] = useState(id);

  return (

    <div className="container">

       <StockInfo stock={props.stock} idIdx={idIdx} />       //여기서 props.stock은 App.js에서 가져온 재고 useState입니다.

       <button
            className="btn btn-danger"
            onClick={() => {
              let copyStock = [...props.stock];
              copyStock[id] -= 1;
              props.setStock(copyStock);
            }}
          >주문하기</button>

    </div>

  )

}

function StockInfo(props) {
  return (
    <div>
      {
        props.stock[props.idIdx] > -1
        ? ( <p>재고 : {props.stock[props.idIdx]}</p> )
        : ( <p>재고 없어용~</p>)

      }
    </div>
  );
}