你好，我在我的頁面中使用輪播時出錯，但是沒有顯示在瀏覽器上

`不顯示傳送帶嘗試使用ms-edge中的開發工具進行檢查，但在元素上甚至找不到它，并且在瀏覽器上也不顯示任何錯誤

如果是css，這是我在idk下面的代碼，但看起來沒問題

import { IconButton, Box, Typography, useMediaQuery } from "@mui/material";
import "react-responsive-carousel/lib/styles/carousel.min.css";
import NavigateBeforeIcon from "@mui/icons-material/NavigateBefore";
import NavigateNextIcon from "@mui/icons-material/NavigateNext";
import { shades } from "../../theme";
import Carousel from 'react-multi-carousel';
import 'react-multi-carousel/lib/styles.css';
const importAll = (r) =>
  r.keys().reduce((acc, item) => {
    acc[item.replace("./", "")] = r(item);
    return acc;
  }, {});

export const heroTextureImports = importAll(
  require.context("../../assets", false, /\.(png|jpe?g|svg)$/)
);

const MainCarousel = () => {
  const isNonMobile = useMediaQuery("(min-width:600px)");

  return (
    <Carousel
      infiniteLoop={true}
      showThumbs={false}
      showIndicators={false}
      showStates={false}
      renderArrowPrev={(onclickHandler, hasPrev, lable) => (
        <IconButton
          onClick={onclickHandler}
          sx={{
            position: "absolute",
            top: "50%",
            left: "0",
            color: "white",
            padding: "50px",
            zIndex: "10",
          }}
        >
          <NavigateBeforeIcon sx={{ fontSize: 40 }} />
        </IconButton>
      )}
      renderArrowNext={(onclickHandler, hasNext, lable) => (
        <IconButton
          onClick={onclickHandler}
          sx={{
            position: "absolute",
            top: "50%",
            right: "0",
            color: "white",
            padding: "50px",
            zIndex: "10",
          }}
        >
          <NavigateNextIcon sx={{ fontSize: 40 }} />
        </IconButton>
      )}
    >
      {Object.values(heroTextureImports).map((texture, index) => {
        try {
          return (
            <Box key={`carousel-image-${index}`}>
              <img
                src={texture}
                alt={`carousel-${index}`}
                style={{
                  width: "100%",
                  height: "700px",
                  objectFit: "cover",
                  backgroundAttachment: "fixed",
                }}
              />
              <Box
                color="white"
                padding="20px"
                borderRadius="1px"
                textAlign="left"
                backgroundColor="rgb(0, 0, 0, 0.4)"
                position="absolute"
                top="46%"
                left={isNonMobile ? "10%" : "0"}
                right={isNonMobile ? undefined : "0"}
                margin={isNonMobile ? undefined : "0 auto"}
                maxWidth={isNonMobile ? undefined : "240px"}
              >
                <Typography color={shades.secondary[200]}>
                  -- New Items
                </Typography>
                <Typography variant="h1">summer sales</Typography>
                <Typography
                  fontWeight="bold"
                  color={shades.secondary[300]}
                  sx={{ textDecoration: "underline" }}
                >
                  Discover More
                </Typography>
              </Box>
            </Box>
          );
        } catch (error) {
          // Handle the error here
          console.error(`Error rendering carousel image at index ${index}:`, error);
          // You can return a fallback UI or null if desired
          return null;
        }
      })}
    </Carousel>
  );
};

export default MainCarousel;

這是我的代碼，一切都準備好了，我已經檢查了MUI組件的導入，我已經檢查了應用于元素的CSS樣式，但是如果你看到錯誤，請告訴我，我已經安裝了MUI依賴項和react-response-carousel