Navigation Icons not visible

[AbhayaShankar]

<Swiper
        onSlideChange={handleSlideChange}
        slidesPerView={1}
        spaceBetween={30}
        loop={true}
        pagination={{
          clickable: true,
        }}
        effect="fade"
        navigation={true}
        modules={[Pagination, Navigation, EffectFade]}
        className="mySwiper flex items-end justify-end flex-row w-0 lg:w-[34%] h-full !mr-0 bg-[#0c0a09]"
      >
        {heroImages.map((item) => (
          <SwiperSlide key={item.id} className="w-[800px] !h-[80vh] relative">
            <Image
              src={item.imgUrl}
              alt="hero-image"
              width={500}
              height={500}
              className="w-full h-full object-cover object-center"
            />        
          </SwiperSlide>
        ))}
      </Swiper>
      

I am using Swiper and SwiperSlides but I am unable to see any Navigation icons for navigating left and right. Paginations are working fine but not the navigation buttons.
Can someone suggest what might be going wrong here?