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

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>