The AOS(Animation on scroll) is not working in next 13

I Use next 13 , I wanna add AOS library in my app and us it , I installed it , and added it properly to my component, but my component doesn’t show and also I don’t get any error.here is my Home Page code :

import Hero from "../components/index/Hero"
import ItSolutions from "@/components/index/ItSolutions"
import Skills from "@/components/index/Skills"
import Script from "next/script"
import AOS from 'aos';
import 'aos/dist/aos.css';

const getData = async (type) => {
const projectId = 'q8l0xi0c'
const dataset = 'production'

const query = encodeURIComponent(`*[_type == "${type}"]`)
const url = `https://${projectId}.api.sanity.io/v2021-10-21/data/query/${dataset}? 
query=${query}`
const response = await fetch(url)
const data = (await response.json()).result
return data

}

const Home = async () => {
<Script>
    AOS.init();
</Script>

const members = await getData('member')
const blogs = await getData('blog')
const customers = await getData('customer')
const solutions = await getData('solution')

return (

    <div>
        <Hero />
        <ItSolutions solutions={solutions} />
        <Skills />
    </div>

)

}
export default Home

and I used this div for another component named Skills to apply AOS :

<div className="max-w-screen-xl mt-28 pt-36 px-4 pb-28 sm:px-16 md:px-8 lg:grid lg:grid-cols-2 
lg:gap-20 lg:mt-16 xl:px-20 xl:mx-auto "   data-aos="fade-up"> HI There
</div>

>Solution :

It looks like there are a few issues with the code that might be causing the AOS animation to not work:

1. You’re using a Next.js Script component, but this component is not used in the way it was intended to be used. You should use a regular script tag instead to initialize AOS.
2. You’re initializing AOS in an asynchronous function, but it’s not clear if the component that uses AOS is being rendered before the function has completed. You might want to move the AOS.init() call outside of the function, so that it’s run before the component is rendered.
3. In the component where you’re using AOS, you’re using the data-aos attribute on a div element. This is correct, but you also need to make sure that the class names are correctly applied, as described in the AOS documentation.

Here’s the corrected code:

import Hero from "../components/index/Hero"
import ItSolutions from "@/components/index/ItSolutions"
import Skills from "@/components/index/Skills"
import AOS from 'aos';
import 'aos/dist/aos.css';

const getData = async (type) => {
const projectId = 'q8l0xi0c'
const dataset = 'production'

const query = encodeURIComponent(*[_type == "${type}"])
const url = https://${projectId}.api.sanity.io/v2021-10-21/data/query/${dataset}? query=${query}
const response = await fetch(url)
const data = (await response.json()).result
return data

}

const Home = async () => {
AOS.init();

const members = await getData('member')
const blogs = await getData('blog')
const customers = await getData('customer')
const solutions = await getData('solution')

return (
<div>
<Hero />
<ItSolutions solutions={solutions} />
<Skills />
</div>
)

} export default Home

and in the component Skills:

<div className="max-w-screen-xl mt-28 pt-36 px-4 pb-28 sm:px-16 md:px-8 lg:grid lg:grid-cols-2 lg:gap-20 lg:mt-16 xl:px-20 xl:mx-auto aos-init" data-aos="fade-up">
Hi there!
</div>