No pude encontrar una respuesta aquí La biblioteca AOS no funciona, excepto en la actualización

Estoy creando una aplicación de reacción y quería usar AOS para animar https://michalsnik.github.io/aos/ .

Tengo un componente funcional con este código.

 import AOS from 'aos'; import 'aos/dist/aos.css'; export default function Portfolio() { useEffect(() => { AOS.init({ duration: 1000 }); AOS.refresh(); }, []); return( <span className="bumper">Projects </span> <div data-aos="fade-in"> <h3> Hello! </h3> </div> )

Cuando cargo la página por primera vez, la pantalla solo dice "Proyectos", y no hay "¡Hola!", Pero cuando edito el "¡Hola!" a "¡Hola!" y React se actualiza automáticamente. Veo que aparece la animación.

¿Qué es posible que esté pasando aquí?

Estoy en el entorno React Dev

 "react-dom": "^18.1.0", "react": "^18.1.0", "aos": "^3.0.0-beta.6",