Im have 5 slider but only 4.2 are visible and unable to see next arrow also.

[poojagirne]

import { useEffect, useState } from "react";
import Box from "@mui/material/Box";
import { apiProduct } from "@Services/API/IndividualApi's/Products";
import { IPagination, IProduct } from "@Interfaces/Api/Product";
import Product from "./Product";
import { useTheme } from "@mui/material/styles";
import { Swiper, SwiperSlide } from "swiper/react";
import { A11y, Navigation, Scrollbar } from "swiper/modules";
import "swiper/css";
import "swiper/css/navigation";
import { Link, useMediaQuery } from "@mui/material";
import { ICategory } from "@Interfaces/Api/category";
import { StyledViewAllLink } from "@Styled/Pages/Landing";
import "swiper/swiper-bundle.css";

const breakPoints = {
0: { slidesPerView: 1 },
375: { slidesPerView: 1.5 },
600: { slidesPerView: 2.3 },
1024: { slidesPerView: 3 },
1200: { slidesPerView: 3.2 },
1500: { slidesPerView: 3.5 },
2000: { slidesPerView: 5 },
};
interface IProductsProp {
category: ICategory;
}

export default function ProductsComponent({ category }: IProductsProp) {
const [products, setProducts] = useState<IProduct[]>([]);
const [pagination, setPagination] = useState();
const theme = useTheme();
const lgPlus = useMediaQuery(theme.breakpoints.up("lg"));
const isMobile = useMediaQuery(theme.breakpoints.down("sm"));

useEffect(() => {
getSomeProductsWithThisCategory();
}, []);

const getSomeProductsWithThisCategory = async () => {
try {
const obj = {
$and: [
{
categories: {
$eq: category.category,
},
},
],
};
const queryParam = &filter=${JSON.stringify(obj)};
const response = await apiProduct.getAll!(1, 5, queryParam);
setProducts(response.data);
setPagination(response.pagination);
} catch (err) {
console.log(err);
}
};

return (
<Box
sx={{
flexGrow: 1,
width: "90%",
maxWidth: "100vw",
overflow: "hidden",
position: "relative",
// px: 1,
}}
id="home-page-product-carousel"
>
{(products.length > 2 && lgPlus) || products.length > 1 ? (
<Box sx={{ position: "relative" }}>
<Swiper
slidesPerView={1}
slidesPerGroupSkip={1}
grabCursor={true}
keyboard={{
enabled: true,
}}
breakpoints={breakPoints}
// scrollbar={true}
navigation={true}
pagination={{
clickable: true,
}}
modules={[Scrollbar, Navigation]}
className="mySwiper"
>
{products.map((item) => (

<Box
sx={{ width: "100%", maxWidth: "100%", overflow: "hidden" }}
>



))}

        {pagination?.hasNext && (
          <SwiperSlide>
            <Box sx={{ width: "100%" }}>
              <Link href={`/buy/${category.slug}`}>
                <StyledViewAllLink variant="h6">View all</StyledViewAllLink>
              </Link>
            </Box>
          </SwiperSlide>
        )}
      </Swiper>
    </Box>
  ) : (
    <Box sx={{ display: "flex", flexWrap: "wrap" }}>
      {products.map((item) => (
        <Box key={item._id} sx={{ width: "fit-content" }}>
          <Product product={item} />
        </Box>
      ))}
    </Box>
  )}
</Box>

);
}