React-Plx: Scale Property Not Updating for Reused Components in Smooth-Scrolling Animation

Question

I'm using React-Plx to add smooth-scrolling animations to my website and it seems to giving me some issues. Unless I'm missing something. I'm new to the library so I'm not sure if I misconfigured something somewhere.

Here's my issue:

I want to animate my different reusable components as a user scrolls down a page. One component that I have is a text block that contains two paragraphs, and it works perfectly as intended, ONCE. After working this one time it refuses to animate anything else that uses the scale property. Whatever I set the start scale value to, it remains that value while scrolling.

My parallax data looks like this:

const parallaxData = [
        {
            start: "self",
            end: 300,
            properties: [
                {
                    startValue: 0.25,
                    endValue: 1,
                    property: "scale",
                },
            ],
        },
        {
            start: "self",
            duration: 500,
            properties: [
                {
                    startValue: 0,
                    endValue: 1,
                    property: "opacity",
                },
            ],
        },
    ];

And then the one component:

<Plx className="info-heading-parallax" parallaxData={parallaxData}>
        <StyledInfoHeading className={className}>
            <div className="info-heading-container">
                {subHeading && (
                    <p
                        className="info-sub-heading"
                        style={{ order: subHeadingOrder ? subHeadingOrder : 1 }}
                    >
                        {subHeading}
                    </p>
                )}
                {heading && (
                    <h3
                        className="info-heading"
                        style={{ order: headingOrder ? headingOrder : 0 }}
                    >
                        {heading}
                    </h3>
                )}
            </div>
        </StyledInfoHeading>
    </Plx>

The parallax data for the other component is similar. But even if I reuse this component on the page again the scale property doesn't update. Only the opacity does.

Should I use refs? But even then, how would I use the ref to differentiate which component is which? I only have a year's worth of coding experience so this one is a real head scratcher for me.

Any help would be much appreciated