我正在尝试构建一个包含多个图像的项目页面，这些图像可以被翻阅。我使用了React和Slick Carousel。页面正确获取数据，显示了Carousel的三个点，但它们没有显示任何图像。有什么想法吗？

import { Box, CardContent, Card } from "@mui/material";
import Slider from "react-slick";
import "slick-carousel/slick/slick.css";
import "slick-carousel/slick/slick-theme.css";

const ItemDetail = () => {

  const settings = {
    dots: true,
    infinite: true,
    slidesToShow: 1,
    slidesToScroll: 1,
  };

  return (
    <Card
      sx={{
        maxWidth: 600,
        display: "flex",
        justifyContent: "center",
        alignItems: "center",
        borderRadius: 0,
        flexDirection: "column",
      }}
    >
      <Slider {...settings}>
        {item.images.map((image) => (
          <div key={image.id}>
            <Box
              sx={{
                height: "100%",
                border: 1,
                borderColor: "border.main",
                objectFit: "cover",
              }}
              alt=""
              image={
                `URL` + item.images[0].image
              }
              onError={(e) => console.log("Error loading image", e)}
            />
          </div>
        ))}
      </Slider>

      ```