I could not find an answer here AOS Library not working except for on refresh

I am making a react app and wanted to use AOS for animating https://michalsnik.github.io/aos/.

I have a functional component with this code

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>
)

When I first load the page, the screen only says "Projects", and there is no "Hello!", but when I edit the "Hello!" to "Hi!" and React auto-refreshes I see the animation come in.

What is possibly happening here?

I am in the React Dev environment

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