Next.js scss classes not reaching external generated html

I'm switching my create-react-app app to a Next.js app, I'm trying to get the scss working properly, every thing seems to be working fine, I had to rename all my .scss files to .module.scss. i had to switch all the className="example" to className={style["example"]}.

the problem here is when i have an externally generated component (swiper.js for example):

import { Swiper, SwiperSlide } from 'swiper/react'
const Component = () => {
  return (
   <Swiper> // this will then be a <div class="swiper-wrapper"></div>
      <SwiperSlide> </SwiperSlide>
  </Swiper>
)}

this will look like this on the DOM :

So in the parent I'm trying to reach it this way :

.parent{
    .swiper-wrapper {
      width: auto;
      display: flex;
      justify-content: center;
    }
  }

this isn't working because there is no swiperWrapper inside any of the style modules.

any workaround for it, I'm really not into using the global.scss solution.