React. Store JSX class component and change it's props later

Im developing a react image editor, and I want to draw lines on the canvas, to do this I have a class that i add to the canvas elements array (this stores all the diferent elements, text, images and lines that the canvas redraws every frame).

But when i do this:

let pos = this.stageRef.current.getPointerPosition()
let new_line = (<Line
                  key={this.state.itemArray.length}
                  stroke={'#df4b26'}
                  strokeWidth={5}
                  globalCompositeOperation={'source-over'}
                  points={[pos.x, pos.y]}
                />)
this.state.itemArray.push(new_line)

this.setState({isDrawing: true})

console.log(new_line)

I get this object:

This object it's located inside the itemsArray, all the items are rendered on the main render here:

And it's rendered correctly, but all it's props are read-only and i can't call any methods of the object, what i need it's the "real" React object, the one you get when you call a reference. (I want to add more points to the line object onMoveMouse event)

this:

Is there any way I can get the Line object (i just created) accesing to the itemsArray object instead of using the ref?

I don't know how can i create a Line object directly and call it's methods without a Ref ¿Do I really need a ref to an object i just created 2 lines above?.