Animated style-components perfomance issues - css

Question

I found html/css snowfall animation. Html part of this animation is 200 divs with .snow class and here is the SCSS:
body {
background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
overflow-x: hidden;
filter: drop-shadow(0 0 10px white);
}
#function random_range($min, $max) {
$rand: random();
$random_range: $min + floor($rand * (($max - $min) + 1));
#return $random_range;
}
.snow {
$total: 200;
position: absolute;
width: 10px;
height: 10px;
background: white;
border-radius: 50%;
#for $i from 1 through $total {
$random-x: random() * 100vw;
$random-offset: random_range(-10, 10) * 1vw;
$random-x-end: $random-x + $random-offset;
$random-x-end-yoyo: $random-x + ($random-offset / 2);
$random-yoyo-time: random_range(3,8) / 10;
$random-yoyo-y: $random-yoyo-time * 100vh;
$random-scale: random();
$fall-duration: random_range(10, 30) * 1s;
$fall-delay: random(30) * -1s;
&:nth-child(#{$i}) {
opacity: random();
transform: translate($random-x, -10px) scale($random-scale);
animation: fall-#{$i} $fall-duration $fall-delay linear infinite;
}
#keyframes fall-#{$i} {
#{percentage($random-yoyo-time)} {
transform: translate($random-x-end, $random-yoyo-y) scale($random-scale);
}
to {
transform: translate($random-x-end-yoyo, 100vh) scale($random-scale);
}
}
}
}
I wanted to make a react component out of this animation, and I did it with styled-components:
const randomRange = (min: number, max: number) => {
return min + Math.random() * (max - min)
}
const DropAnimation = (docHeight: number, size:number) => {
const xstart = Math.random() * 100;
const xshift = randomRange(-10, 10);
const xmiddle = xstart + xshift;
const xend = xstart + xshift / 2;
const middlePercentage = randomRange(30, 80)
const animation = keyframes`{
0%{
transform: translate(${xstart}vw,-10px);
}
${middlePercentage}%{
transform: translate(${xmiddle}vw,${middlePercentage / 100 * docHeight}px);
}
100%{
transform: translate(${xend}vw,${docHeight - size}px);
}
}`
return animation
}
const StyledSnowflake = styled.div<StyledSnowflake>`
position: absolute;
width: ${p => p.size}px;
height: ${p => p.size}px;
border-radius: 50%;
background-color: ${p => p.color || 'white'};
animation: ${p => DropAnimation(p.docHeight, p.index,p.size)} ${p => randomRange(p.duration / 3, p.duration)}s
${p => -p.duration * Math.random()}s linear infinite;
filter: drop-shadow(0 0 10px ${p => p.color || 'white'});
opacity: ${p => p.opacity};
`
const SnowFlake: FC<Snowflake> = ({docHeight, duration, index, size}) => {
const opacity = Math.random();
const randomSize = Math.random() * size;
return <StyledSnowflake duration={duration} size={randomSize} opacity={opacity} docHeight={docHeight}
index={index}/>
}
Snowfall components renders 200 SnowFlake components. All I did is just copied css, but perfomance-wise my Snowfall component is much much worse, everything lagging quite hard. Why? What is the difference between rendering 200 divs from html and 200 styledComponent divs from react?
How can I make this work faster?
P.S. if this question is too stupid, please just leave me a few links where I could read about this. Honestly, I don't even know how to google this problem, because when I search for any kind of info I only see articles about efficient rendering in react, but I don't think this is what I actually need since I render my components once, but animation still performs poorly.
EDIT
I found out that creacting regular divs in react works fine like this:
<div>
{Array(200).fill(null).map((_item,i)=> <div key={i} className={styles.snow}></div>)}
</div>
But when I use styled-components and add animation for each of those everything starts lagging.