“我试图在我的组件中使用多个滑块，每个旋转木马下面都有自定义箭头。我已经阅读了文档，一切似乎都是正确的，但是单击箭头不起作用。可能发生了什么？我使用的是Next.js 13。”
我代码：

const { locale } = useRouter();
    const dataCurrentLocale = dataCategories[locale as keyof typeof dataCategories];
    const dataProductsCurrentLocale = dataProducts[locale as keyof typeof dataProducts];
    const sliderRef = useRef<any>();

    const next = () => {

      sliderRef.current?.slickNext();
      
    };
   
     const previous = () => {
    sliderRef.current?.slickPrev();
    
    }; 

    const settings = {
        dots: true,
        infinite: false,
        speed: 500,
        slidesToShow: 4,
        slidesToScroll: 3,
        responsive: [
            {
                breakpoint: 1024,
                settings: {
                    slidesToShow: 2,
                    slidesToScroll: 2,
                    infinite: true,
                    dots: true,
                },
            },
            {
                breakpoint: 600,
                settings: {
                    slidesToShow: 1,
                    slidesToScroll: 2,
                    infinite: true,
                    dots: true,
                },
            },
        ],
    };

   

    return (
        <CategoriesPageWrapper>
            <div className="header">
                <h1>{dataCurrentLocale.title}</h1>
            </div>

            {dataProductsCurrentLocale.categories.map((category: any) => {
                return (
                    <div className="category_container" key={category.id}>
                        <div className="category_header">
                            <span>{category.name}</span>
                            <Link href={'/'}>
                                {locale === 'es'
                                    ? `Ver todos los productos de ${category.name}`
                                    : locale === 'cat'
                                    ? ''
                                    : `See all ${category.name} products`}
                            </Link>
                        </div>

                        <Slider {...settings} className="carrousel_container" ref={sliderRef}>
                            {category.subcategories.map((subcategory: any) => {
                                return (
                                    <div key={subcategory.query.id}>
                                        <div className="card">
                                            <Link href={'/'}>
                                                <div className="portrait_container">
                                                    <img src={subcategory.portrait}></img>
                                                </div>
                                            </Link>

                                            <div className="link_container">
                                                <Link href={'/'}>
                                                    {locale === 'es'
                                                        ? `Ver ${subcategory.name}`
                                                        : locale === 'cat'
                                                        ? ``
                                                        : `See ${subcategory.name} products`}
                                                </Link>
                                            </div>
                                        </div>
                                    </div>
                                );
                            })}
                        </Slider>
                        <div className="arrows">
                            <Image
                                src={'/assets/images/icons/slide-black-arrow.png'}
                                width={24}
                                height={10}
                                alt="Prev"
                                onClick={previous} // this is one function
                                className={'prev arrow'}
                            />
                            <Image
                                src={'/assets/images/icons/slide-black-arrow.png'}
                                width={24}
                                height={10}
                                alt="Next"
                                className={'next arrow'}
                                onClick={next} // this is other function
                            />
                        </div>
                    </div>
                );
            })}
        </CategoriesPageWrapper>
    );
};

export default CategoriesPage;

字符串
自定义我的箭头在React光滑旋转木马