Me está costando mucho intentar que esto funcione. Obteniendo datos de una API e intentando mostrar las imágenes usando el truco de reacción, pero no funciona correctamente. ¿Alguien puede decirme qué está mal? Cualquier ayuda es apreciada. Esta es la documentación: 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;