ReactJS — How to modify CSS properties using createRef()? - css

Question

I am trying to add vertical movement to a list of stacked titles time I change page changes in FullPageJS. I get no error at all, but the action is not happing. My guess is that I am wrong trying to modify the CSS property transition using the element ref. Can anyone spot something wrong with the code below?
Thank you in advance.
React
componentDidMount() {
titleWidth = this.title.current.clientHeight
titleHeight = this.title.current.clientHeight
this.mask.current.css = {
height: titleHeight + "px",
width: titleWidth + "px",
}
this.frame.current.css = { top: titleHeight + "px" }
}
onLeave(origin, destination, direction) {
console.log("Leaving section " + origin.index)
// Actions not working
if (direction == "down") {
this.frame.current.style.transition = { top: "-=" + titleHeight }
} else if (direction == "up") {
this.frame.current.style.transition = { top: "+=" + titleHeight }
}
}
HTML
<div id="wrapper--frame" className="flex justify-center">
<div ref={this.mask} id="mask" className="w-5/6 overflow-hidden">
<div ref={this.frame} id="frame">
<div ref={this.title} className="text-p frame--title ">
One
</div>
<div ref={this.title} className="text-p frame--title ">
Two
</div>
<div ref={this.title} className="text-p frame--title ">
Three
</div>
<div ref={this.title} className="text-p frame--title ">
Four
</div>
</div>
</div>
</div>