쇼핑몰 프로젝트 Detail.js useParams() 질문

안녕하세요, 질문 있어서 게시글 남깁니다. Detail.js에서 고유값 id 부여할 때 다음과 같이 작성해도 될까요? useParams로 정의한 id는 순서가 바뀌어도 0,1,2,3,... 이런식으로 되니까 shoes[id] 이렇게 작성하면 고유 id를 부여할 수 있을거라고 생각했습니다.

import React from "react";
import { useNavigate, useParams } from "react-router-dom";
import "./Style.css";

export default function Detail({ shoes }) {
let navigate = useNavigate();
let { id } = useParams();
let productId = shoes[id].id;
return (
<div className="container">
 <div className="row">
 <div className="col-md-6">

 </div>
 <div className="col-md-6 mt-4">
 <h4 className="pt-5">{shoes[productId].title}</h4>
 <p>{shoes[productId].content}</p>
 <p>{shoes[productId].price}원</p>
 <button className="btn btn-danger">주문하기</button>
 <button
className="btn btn-danger"
onClick={() => {
navigate(-1);
 }}
>
 뒤로가기
 </button>
 </div>
 </div>
 </div>
 );
}