쇼핑몰 페이지 이름순 정렬 버튼 클릭시 사진 같이 바뀜

쇼핑몰 페이지 이름순 정렬 버튼 클릭시 사진을 같이 id에 맞춰 바꾸게 하고 싶은데 방법을 모르겠네요 ㅠㅠ

data 객체에 각 id에 맞는 사진을 넣어주고 detail.js에 img경로를 변수로 설정해주었는데 되지 않아 여쭤봅니다!

let data = [
 {
id : 0,
image : 'https://codingapple1.github.io/shop/shoes' + 1 + '.jpg',
title : "White and Black",
content : "Born in France",
price : 120000
 },
 
 {
id : 1,
image : 'https://codingapple1.github.io/shop/shoes'+ 2 +'.jpg',
title : "Red Knit",
content : "Born in Seoul",
price : 110000
 },
 
 {
id : 2,
image : 'https://codingapple1.github.io/shop/shoes'+ 3 +'.jpg',
title : "Grey Yordan",
content : "Born in the States",
price : 130000
 }
 ]

export default data;

import { useParams } from "react-router-dom";

function Detail(props) {

let {id} = useParams();

return (
<div className="container">
 <div className="row">
 <div className="col-md-6">
 <img src={props.shoes[id].image} width="100%"        // 코드로 올리면 사진으로 나와서 일부로 닫는 부분을 지웠습니다
 </div>
 <div className="col-md-6">
 <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">주문하기</button>
 </div>
 </div>
 </div>
 )
}

export default Detail;

<button onClick={()=>{
let copy = [...shoes];
copy.sort((a,b) => a.title.toLowerCase() < b.title.toLowerCase() ? -1 : 1);
setShoes(copy);
 }}>이름순 정렬</button>

function Card(props) {
return (
<div className="col-md-4">
<img src={'https://codingapple1.github.io/shop/shoes'+ (props.i) +'.jpg'} width="80%" // 이 부분도 이미지로 보여서 닫는 부분 지웠습니다
 <h4>{props.shoes.title}</h4>
 <p>{props.shoes.price}</p>
 </div>
 )
};
export default App;