useParams 사용시 props.shoes[id].title undefined 에러

useParams로 잘 쓴 것 같은데 오류가 나옵니다.props.shoes[id].title 콘솔창에서는 이 부분에 오류가 있다고 나오는데 혹시 뭐가 잘못된 걸까요ㅜㅜ??

import React, {useState} from 'react';
import {useHistory, useParams} from 'react-router-dom';

function Detail(props){
let { id } = useParams();

let history = useHistory();

return (
<div className="container">
<div className="row">
<div className="col-md-6">
  <img src="https://codingapple1.github.io/shop/shoes1.jpg"/>
</div>
<div className="col-md-6 mt-4">

<h4 className="pt-5">{props.shoes[id].title}</h4>
<p>{props.shoes[id].content}</p>
<p>{props.shoes[id].price}원</p>

<button className="btn btn-danger" onClick={()=>{history.goBack()}}>뒤로가기</button>

<button className="btn btn-danger">주문하기</button>
 
</div>
</div>
</div>
)
};

export default Detail;