I have error Using carousel in my page but not displaying on browser

Question

hi I have error Using carousel in my page but not displaying on browser

`doesn't desplay the carousel tried inspecting with dev tools in ms-edge but can't even find it on element and also it doesn't display any errors on browser

this is my code below idk if it's the css but seems okay `

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;

this is my code everything is there for abt the carousel ive Checked the import of MUI components which are okay, i've Checked the CSS styles applied to the elements but if u see errors let me know, i've installed MUI dependencies and react-responsive-carousel`