part2.쇼핑몰프로젝트 - 7강 리액트 라우터 문의

안녕하세요. 항상 친절한 답변에 감사드리며 오늘도 질문 하나 드립니다.
리액트 라우터로 메인 페이지에서 detail 페이지로 경로 이동을 하려는데,
local 3000/detail 까지 url 은 문제 없이 입력은 되지만 해당 페이지가 렌더가 안됩니다.
어디가 잘못되었는지 감이 안잡히네요 ㅠㅠ
조언해주시면 감사하겠습니다.

<App.js>
import Detail from './component/Detail.js';
<Route
          Route
          path="/detail/:id"
          element={<Detail product={product} />}
/>

<Detail.js>
import { useParams } from 'react-router-dom';

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

  let findProduct = props.Product.find(function (a) {
    return a.id === id;
  });

  return (
    <div className="container">
      <div className="row">
        <div className="col-md-6">
          <img
            src="https://codingapple1.github.io/shop/shoes1.jpg"
            width="100%"
          />
        </div>
        <div className="col-md-6">
          <h4 className="pt-5">{findProduct.title}</h4>
          <p>{findProduct.content}</p>
          <p>{findProduct.price}원</p>
          <button className="btn btn-danger">주문하기</button>
        </div>
      </div>
    </div>
  );
}

export default Detail;