JavaScript React Slider 无法在屏幕上没有图像时隐藏下一个箭头按钮

问：

我在 div 中显示 n 个图像取决于屏幕尺寸。目前，我在 div 中没有任何图像时隐藏了上一个按钮，但当我的 div 中没有任何图像时，我无法隐藏下一个按钮。currentIndex != 0

我的代码在这里。

/image_slider
const containerRef = useRef(null);
const [containerWidth, setContainerWidth] = useState(0);
const [currentIndex, setCurrentIndex] = useState(0);

useEffect(() => {
  const updateContainerWidth = () => {
    if (containerRef.current) {
      setContainerWidth(containerRef.current.offsetWidth);
    }
  };

  // Initial setup
  updateContainerWidth();

  // Update container width on window resize
  window.addEventListener('resize', updateContainerWidth);

  return () => {
    // Cleanup event listener on component unmount
    window.removeEventListener('resize', updateContainerWidth);
  };
}, []); // Empty dependency array ensures this effect runs only once on mount

const showImages = (direction) => {
  console.log("clicked")
  setCurrentIndex((prevIndex) => {
    let newIndex = prevIndex + direction;

    if (newIndex < 0) {
      newIndex = items.length - 1;
    } else if (newIndex >= items.length) {
      newIndex = 0;
    }

    return newIndex;
  });
};

我的上一个和下一个按钮

 <FaArrowRight size={30} className="fill-orange-500 mb-2" onClick={() => showImages(1)}/>
                {currentIndex != 0 &&
                <FaArrowLeft size={30} className="fill-orange-500 " onClick={() => showImages(-1)}   />
                }

我的div显示图像

   {containerWidth > 0 && (
  <>  
    {items.map((data,index)=>(


      <div key={index}  style={{ display: 'flex', transition: 'transform 0.5s', transform: `translateX(-${currentIndex * containerWidth}px)` }}>.....

当我的屏幕上没有任何图像时，我不明白如何隐藏下一个按钮或向右箭头。