Animate. js: Как правильно использовать target в элементе React. js?

Question

Я хотел бы использовать animate. js в моем приложении react. js. Нацеливание на элемент JSX с помощью useRef и useEffect вообще не работает. Я уверен, что все еще чего-то не хватает.

Примечание: это только пример! Я только хотел бы знать, как использовать target в React. js elements.

import React, {useEffect, useRef} from "react";
import anime from "animejs/lib/anime.es.js";

const Sent = (props) => {

    const lettersRef = useRef(null);
    const MlRef = useRef(null);
useEffect(() => {


    anime.timeline({ loop: true })
    .add({
      targets: lettersRef.current, //This is probably wrong. 
      translateY: ["1.1em", 0],
    })
    .add({
      targets: MlRef.current, //This is also probably wrong
      opacity: 0,
    });
},[]);

  return (
    <div className={classes.sentContainer}>
      <h2 class='Ml6' ref={MlRef}>
        <span class='Text_wrapper'>
          <span class='Letters' ref={lettersRef} > Some text </span>
        </span>
      </h2>
    </div>
  );
};