Swiper v6.8.4 is not generated in next.js prod build properly

Question

I use "swiper": "^6.8.4" library in my project to make a carousel. Although, when I run my project locally, everything works fine for me, but PROD version made me sad.

Everything happens in a head section of page. At the beginning it works ok. No weird behavior. But after a few seconds, the additional, last three elements (script, link, style) are appearing in the head section before body.

It's not know why it generates these additional files after webpack PROD build. Two of them (script and link) overwrite existing styles. They appear in network sheet separately.

The project is build on next.js "next": "^12.0.7"

This is my component

import React from 'react';
import { SwiperSlide } from 'swiper/react';
import { ProductsList } from '~source/core/models/page-modules/products-list';
import SwiperCarousel from '~source/ui/components/swiper';
import useBreakpoints from '~source/ui/hooks/useBreakpoints';
import { sendAnalytics } from '~source/ui/utils/e-commerce';
import { cx } from '~source/ui/utils/join-classnames';
import Container from '../container';
import ProductBox from '../product-box';
import $ from './products-swiper.module.scss';

interface Props extends ProductsList {
    nested?: boolean;
}

const ProductsSwiper: React.FC<Props> = ({ products, title, nested }) => {
    const height = 280;
    const { isLaptop } = useBreakpoints();
    const spaceBetween = isLaptop ? 10 : 40;

    React.useEffect(() => {
        sendAnalytics({
            products,
            eventType: 'view_item_list',
            title,
        });
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [products]);

    if (products.length === 0) return null;

    return (
        <Container className={cx($.container, nested && $.containerNested)}>
            <h2 className={$.title}>{title}</h2>
            <SwiperCarousel
                className={$.swiper}
                loopedSlides={products.length}
                height={height}
                nested
                centeredSlides
                useBaseStyle
                slidesPerView="auto"
                spaceBetween={spaceBetween}
            >
                {products.map((product, index) => (
                    <SwiperSlide
                        className={$.item}
                        style={{ height }}
                        key={product.productId}
                    >
                        <div className={$.item} key={product.productId}>
                            <ProductBox
                                product={product}
                                index={index}
                                carousel
                            />
                        </div>
                    </SwiperSlide>
                ))}
            </SwiperCarousel>
        </Container>
    );
};

export default ProductsSwiper;

Could you guys help me?