I cant seem rendered the data on the page using server side rendering with next js

Here is a chuck of the code.

const getProfile = async (): Promise<Profile> => {
    const res = await client.fetch(groq`*[_type == "profile" && fullName == "Evan Feliza"]{
        fullName,
        description,
        "resumeURL": resumeURL.asset->url,
        socialLinks
    }`);
    return res
};


const HeroSection = async () => {
    const profile = await getProfile()

    return (
        <section id="home" className='relative mx-auto h-auto'>
            <BackgroundLottie />
            <div className='max-h-full'>
                <div className="flex flex-col lg:flex-row items-center justify-center px-6 py-4">
                    <div className='-order-first lg:order-first'>
                        <SocialLinks data={profile?.socialLinks} />
                    </div>
                
                </div>

            </div>
        </section>
    );
};

the data is not rendering on the page any help i know this is an easy problem but it seems bothering me for a while.