Problem passing id using useParams() to Carousle

Question

this is the code in which I am getting id using useParams() but when we try to access it inside the carousel it is throwing an error that says "invalid hook call". Firstly I used match.prams.id but it is deprecated now

import { Fragment, useEffect, useState } from "react";
import Carousel from "react-material-ui-carousel";
import "./ProductDetails.css";
import { useSelector, useDispatch } from "react-redux";
import { getProductDetails } from "../../actions/productAction";
import { useParams } from "react-router-dom";

const ProductDetails = ({}) => {
    let { id } = useParams();
    console.log(id);
      const dispatch = useDispatch();
      const { product, loading, error } = useSelector(
        (state) => state.productDetails
      );
      useEffect(() => {
        dispatch(getProductDetails(id));
      }, [dispatch, id]);
    
      return (
        <Fragment>
          <div className="ProductDeatils">
            <div>
            <Carousel>
            {product.images &&
                  product.images.map((item, i) => (
                    <img
                      className="CarouselImage"
                      key={item.url}
                      src={item.url}
                      alt={`${i} Slide`}
                    />
                  ))}
            </Carousel>
            </div>
          </div>
        </Fragment>
      );
    };

export default ProductDetails;