React Locomotive scroll and scss styles not working correctly

Question

I have a website build with webpack 5 My CSS loaders look like this:

export function buildCssLoader(isDev: boolean) {
    return {
        test: /\.s[ac]ss$/i,
        use: [
            // Creates `style` nodes from JS strings
            isDev ? 'style-loader' : MiniCssExtractPlugin.loader,
            // Translates CSS into CommonJS
            {
                loader: 'css-loader',
                options: {
                    modules: {
                        auto: (resPath: string) =>
                            Boolean(resPath.includes('.module.')),
                        localIdentName: isDev
                            ? '[path][name]__[local]--[hash:base64:8]'
                            : '[hash:base64:8]',
                    },
                },
            },
            // Compiles Sass to CSS
            'sass-loader',
        ],
    }
}  

In the end my classnames look like this: src-widgets-sections-HeroSection-ui-HeroSection-module__heroTextContainer--qcnHwjgr

I'm using locomotive scroll for smooth scrolling and animations on scroll. In order for an animation/transition to start I add data-scroll and data-scroll-class attributes to the element like this:

<div className={cls.heroTextContainer} data-scroll data-scroll-class="appear"> 
Hello
</div>

As styles, I use scss modules:

heroTextContainer {
        transition: 1s all ease;
        transform: translateY(100px);

        &.appear {

             transform: translateY(0px);
        }
    }

The problem is that the class 'appear' applies correctly to the element, but the styles do not apply. When I put

.appear {

             transform: translateY(0px);
        }

outside the module to simple scss file, the styles apply correctly, but I only want it to work inside the module and apply only to one element (with class 'heroTextContainer' Has anyone encountered this issue? I'm quite new to webpack so there might be an issue with css loader