I'm trying to add AOS library to react. My code is like this now which is giving me an error that init is undefined:

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Menubar from './Components/Menubar/Menubar';
import Products from './Components/Products/Products';
import { useEffect, useState } from 'react';
import 'aos/dist/aos.css'
import { AOS } from 'aos';
function App() {
  const [product, setProduct]= useState([]);
  useEffect(()=>{
    fetch('https://fakestoreapi.com/products')
    .then(Response=>Response.json())
    .then(data=>setProduct(data))
  },[]);
  AOS.init();
  const [count, setCount]= useState(0);
  return (
    <div>
      <Menubar count={count}></Menubar>
      <Products count={count} setCount={setCount} product={product}></Products>
    </div>
  );
}

export default App;

And when i Try to use the AOS.init() with hook i get Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

import './App.css';
import 'bootstrap/dist/css/bootstrap.min.css';
import Menubar from './Components/Menubar/Menubar';
import Products from './Components/Products/Products';
import { useEffect, useState } from 'react';
import 'aos/dist/aos.css'
import { AOS } from 'aos';
function App() {
  const [product, setProduct]= useState([]);
  useEffect(()=>{
    fetch('https://fakestoreapi.com/products')
    .then(Response=>Response.json())
    .then(data=>setProduct(data))
  },[]);
  useEffect(()=>{
    AOS.init();
  },[])
  const [count, setCount]= useState(0);
  return (
    <div>
      <Menubar count={count}></Menubar>
      <Products count={count} setCount={setCount} product={product}></Products>
    </div>
  );
}

export default App;