SVG line rotation in Reactjs

[DiegoM]

Hello! I'm creating random triangles.

For the exterior angle I'm using an svg Line, the thing is that I'm passing the center of rotation as a prop to a react component, but the rotation works well just the first time.

 

This is the component:
 

const LineExtension = ({centerX, centerY, rotation, length}) => {

    let [tl] = useState(gsap.timeline())

    useEffect(() => {
        tl.to(`#line`, {rotation: -rotation, svgOrigin: `${centerX} ${centerY}`})
    }, [centerX, centerY, rotation, tl])

    return (
        <g
            >
            <line
                id="line"
                x1={centerX} y1={centerY} x2={centerX+length} y2={centerY} style={{stroke: "rgb(255,0,0)", strokeWidth:"1"}}
            />
        </g>
    );
};

Hope you can help me, thanks!

[ZachSaucier]

Hey Diego. If you'd like our help debugging please create a minimal demo of your issue using something like CodeSandbox.