Lazy load modules. Only when you need'em

[iFreddie]

Hi everyone!
I'm new to nextjs, react and swiper...
I have a Slider component that takes some props like SwiperOptions
and i render it like this:

<Swiper {...options} className={w-full} <SwiperSlide> ....</ SwiperSlide> </Swiper>

What I desire is the follow:
Since this component is reusable, and not every component that uses this Slider needs modules like "Pagination, Navigation",
I want to import this modules only when i need to

I made a function that checks the options provided by props (props.options) and returns an array of modules.
if (props.options['pagination']) { import('swiper/modules).then(( res ): SwiperModule => modules.push(res.Pagination)) // And import the css in some way.. } return modules
so that my template would become
<Swiper {...options} modules={ lazyLoadingModulesFunction } className={w-full} <SwiperSlide> ....</ SwiperSlide> </Swiper>

But it's not working :( could you please give me some help?

Little recap, I am using NextJS 13 with React and TypeScript

P.s i have also tried with the Next LazyLoading method
dynamic ( () => import - - - - - )
But i don't think it's a way :/
thank you in advance

[ShahriarKh]

Why don't you create components for each slider, instead of using a big one-size-fits-all component with lots of conditions?