글정렬버튼을누르고 /detail/0

이렇게가면 그대로입니다.
console.log(shoes);를 Home.js 에서찍으면 글정렬버튼을 누를시 제대로 글정렬된 state를 반환하는 반면에,
Detail.js 에서 콘솔을찍으면 글정렬이안된 원본 state를 반환시켜주고있어요

Detail.js에서 filter 혹은 find 함수로 조건문을걸어서 반환시키고 콘솔찍어보면 글정렬된 회색신발이아니라 검은색슈즈를 계속 출력해주고있어요..ㅠㅠ
뭐때문에그런걸까요?

제 코드는 이렇습니다

App.js 코드

import React, { useState } from 'react';
import { Routes, Route, Outlet } from 'react-router-dom';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';
import data from './data';

import Header from './components/Header';
import Home from './pages/Home';
import Detail from './pages/Detail';
import About from './pages/About';
import Event from './pages/Event';
import EventOne from './pages/EventOne';
import EventTwo from './pages/EventTwo';

const App = () => {
  const [shoes, setShoes] = useState(data);

  const handleSortBtn = () => {
    const copy = [...shoes];
    copy.sort((a, b) => (a > b ? 1 : -1));
    setShoes(copy);
  };

  return (
    <>
      <Header />
      <Routes>
        <Route
          path='/'
          element={<Home shoes={shoes} handleSortBtn={handleSortBtn} />}
        />
        <Route path='/detail/:id' element={<Detail shoes={shoes} />} />
        <Route path='/about' element={<About />} />
        <Route path='/event' element={<Event />}>
          <Route path='one' element={<EventOne />} />
          <Route path='two' element={<EventTwo />} />
        </Route>

        <Route path='*' element={<div>없는페이지임</div>} />
      </Routes>
    </>
  );
};

export default App;

Detail.js

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

const Detail = ({ shoes }) => {
  const { id } = useParams();
  const findItem = shoes.filter((item) => item.id == id);
  console.log(findItem);

  return (
    <div className='container'>
      <div className='row'>
        <div className='col-md-6'>
          < img src={shoes[id].src} width='100%' alt='' />
        </div>
        <div className='col-md-6 mt-4'>
          <h4 className='pt-5'>{shoes[id].title}</h4>
          <p>{shoes[id].content}</p>
          <p>{shoes[id].price}원</p>
          <button className='btn btn-danger'>주문하기</button>
        </div>
      </div>
    </div>
  );
};

export default Detail;