쇼핑몰관련 질문드립니다.

쇼핑몰 만들기 부분을 보고 있는데요,

상품상세페이지 만드는데서 막히네요.

메인에서 제품을 누르면 로그인화면이 뜨고 로그인을 하면 다시 메인으로 가는거까지는 되었는데요,

거기서 다시 목록을 누르면 콘솔창에 해당하는 id정보가 나와야 하는데 App.jsx 에서 에러가 난다고 하는데 그대로 따라한 파일이라 어디가 틀린건지 잘 모르겠네요

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

const ProductDetail = () => {
  let {id} = useParams();
  const getProductDetail = async () => {
    let url = `http://localhost:5000/products/${id}`;
    let response = await fetch(url);
    let data = await response.json();
    console.log(data);

  };

  useEffect(()=>{
    getProductDetail(); 
  },[]);

  return (
    <div></div>
  )
}

export default ProductDetail;

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import { useEffect, useState } from 'react';
import { Routes, Route } from 'react-router-dom';
import ProductAll from './page/ProductAll';
import Login from './page/Login';
import ProductDetail from './page/ProductDetail';
import Navbar from './component/Navbar';
import PrivateRoute from './route/PrivateRoute';


function App() {
  const [authenticate, setAuthenticate] = useState(false);  
  //true이면 로그인이 됨, false이면 로그인이 안됨

  useEffect(()=>{
    console.log('aaa',authenticate);
  },[authenticate]); //값이 바뀔때마다

  return (
    <div>
      <Navbar/>
      <Routes>
        <Route path="/" element={<ProductAll/>}/>
        <Route path="/login" element={<Login setAuthenticate={setAuthenticate}/>}/>
        <Route path="/product/:id" element={<PrivateRoute authenticate={authenticate}/>}/>
      </Routes>
    </div>
  )
}

export default App;

<Route path="/product/:id" element={<PrivateRoute authenticate={authenticate}/>}/>

이부분이 에러가 뜨는거 같아요

// PrivateRoute.js
import React from "react";
import { Navigate } from "react-router-dom";

const PrivateRoute = ({ authenticate, children }) => {
  return authenticate ? children : <Navigate to="/login" />;
};

export default PrivateRoute;

// App.js의 수정된 부분
<Route path="/product/:id" element={
  <PrivateRoute authenticate={authenticate}>
    <ProductDetail />
  </PrivateRoute>
}/>