최근 본상품관련 질문입니다.

import "./SideBar.modul.css";
import { useNavigate } from "react-router-dom";

const SideBar = (props) => {
  let newItem = props.latestItem;

  let deduplication = newItem.filter(
    (arr, index, callback) =>
      index === callback.findIndex((t) => t.key === arr.key)
  );
  deduplication.length = 2;

  let navigate = useNavigate();

  return (
    <div className="sideBar">
      <div
        onClick={() => {
          // 배열의 안의 이미지를 클릭했을때 어떤 이미지를 클릭했는지 확인하는 방법
          navigate(`/detail${deduplication[0].key}`);        
        }}
      >
        {deduplication}
      </div>
    </div>
  );
};

export default SideBar;

메인 화면에서 상품을 클릭하면 클릭한 이미지가 배열로 들어오고 그 배열이 보이게 만들었는데요...  

온클릭을 이용해서 클릭한 이미지의 상품 디테일 페이지로 가는 기능을 구현하고싶습니다.. 

제 생각에는..

(각 상품별 디테일 페이지를 /detail${id} 로 만들어 두었습니다.)

(사용하게 되는 상품 이미지에 id를 추가 해두었습니다.)

최근 상품의 배열에 각각의 이미지를 클릭하면 그 이미지의 고유 id를 이용해서 디테일 페이지를 온클릭 안의  navigate(`/detail${deduplication[X].id }`)를 이용해서 이동

이렇게 생각을 했는데..

deduplication[X].id에서 X에 뭘 넣어야할지 모르겠습니다..ㅠㅠ

수동으로 0,1을 집어 넣으면 이동이 가능한데..

0번을 클릭하면 x가 0 으로 1을 클릭하면 1로 바뀌게 하는게 어떻게해야 가능할가요..?