Every rerender causes a new instance to be attached

I am using react-scroll-parallax and I am seeing an issue where if it rerenders on scroll in my case, a new instance of typical is attached to the element resulting in very janky visuals.

https://user-images.githubusercontent.com/806104/171450237-d8f226c7-498f-4b8a-a311-19f6b90b770c.mp4

Edit: Wrapping it in a PureComponent fixes the issue, but I feel like I shouldn't need to do this.

I am using react-scroll-parallax and I am seeing an issue where if it rerenders on scroll in my case, a new instance of typical is attached to the element resulting in very janky visuals.

Screen.Recording.2022-06-01.at.11.00.19.AM.mp4 Edit: Wrapping it in a PureComponent fixes the issue, but I feel like I shouldn't need to do this.

Have you solved this? I could not figure it out. Do you have any alternate solutions?

Yeah, use a PureComponent. The problem was that it rerendered every scroll event and each time it did, a new animation was applied to the text on top of the existing animation. Putting it in a PureComponent tells React not to rerender it after it first mounts. If there is a better way to do this, I'd love to hear but this was the best I could do to fix it.