I'm having a hard time trying to get this to work. Fetching data from an API and trying to display the images using react slick but it's not working properly. Can someone tell me what's wrong? Any help is appreciated. This is the documentation: https://react-slick.neostack.com/docs/example/custom-paging

    const Product: React.FC = () => {
       const dispatch = useDispatch();
       const { id } = useParams();
    
       const product = useSelector(
          (state: RootState) => state.productReducer.product
       );
    
       useEffect(() => {
          dispatch(getProduct(id));
       }, [id, dispatch]);
    
       const settings = {
          customPaging: function (i: any) {
             return (
                <a>
                   <img src={`${product.images[i + 1]}`} alt="" />
                </a>
             );
          },
          dots: true,
          dotsClass: "slick-dots slick-thumb",
          infinite: true,
          speed: 500,
          slidesToShow: 1,
          slidesToScroll: 1,
       };
    
       return (
          <section className="product">
             <div className="bd-container product-container">
                <Slider {...settings}>
                   <div>
                      <img src={`${product.images[0]}`} />
                   </div>
                   <div>
                      <img src={`${product.images[1]}`} />
                   </div>
                   <div>
                      <img src={`${product.images[2]}`} />
                   </div>
                   <div>
                      <img src={`${product.images[3]}`} />
                   </div>
                </Slider>
             </div>
          </section>
       );
    };
    
    export default Product;