reactjs - これらの矢印が反応マルチカルーセルに表示されない理由を理解するのを手伝ってもらえますか?

Question

何日も調査してきましたが、react-carousel に矢印が表示され ません。画像は次のようになります。

• 私はNext .jsを使用しています。通常の反応アプリでこの問題が発生したのは初めてです

  import './carousel.scss'
  import Carousel from 'react-multi-carousel';
  import { ProductContext } from '../../pages/oniContext';
  import { CardComp } from '../cards/card';
  import {Button} from '../../components/common/button';
  import {customArrows} from './customArrows'
  import 'react-multi-carousel/lib/styles.css';
  
  import React, {useState,useEffect,useContext} from 'react'
  
  const responsive = {
    superLargeDesktop: {
      // the naming can be any, depends on you.
      breakpoint: { max: 4000, min: 3000 },
      items: 5,
    },
    desktop: {
      breakpoint: { max: 3000, min: 1024 },
      items: 1,
    },
    tablet: {
      breakpoint: { max: 1024, min: 464 },
      items: 2,
    },
    mobile: {
      breakpoint: { max: 464, min: 0 },
      items: 1,
    },
  };
  
  export const PackageCarousel = (props) => {
    const productConsumer = useContext(ProductContext);
  
  return (
    <Carousel
      swipeable={true}
      responsive={responsive}
  
    >
      {productConsumer.activePackage.map((service, index) => (
        <CardComp
          key={index}
          title={service.title}
          text={service.content}
          addOns={service.addOns}
          image={service.src}
  
        />
      ))}
    </Carousel>
  );
  

  }