window scroll to top not working in nextjs client component

Question

This is the client component code

'use client'
import { Mdx } from "components/mdx-components"
import { Button } from "@components/ui/button"
import { Github } from "@lib/icons"
import SubmitChallenge from "./SubmitChallenge"
import Link from 'next/link'
import React from 'react'

function NewClient({ post }: { post: any }) {

    const handleScrollToTop = () => {
        console.log("hello", window)
        window.scrollTo({ top: 0, behavior: "smooth" });
    }

    return (
        <div>
            <article className="py-6 prose max-w-[65%] px-4 dark:prose-invert mx-auto">
                <p>Challenge #{post.serial}</p>
                <h1 className="mb-2">{post.title}</h1>

                <hr className="block my-6 lg:my-10 border-muted-foreground/30" />
                <Mdx code={post.body.code} />
                <div className={`flex`}>
                    <Button onClick={handleScrollToTop} className="gap-2 w-full">
                        <img src="/warup.png" alt="scroll" className="h-4 w-4" />
                    </Button>
                    <Button className="gap-2 w-full" variant="outline">
                        <Github className="stroke-foreground" />
                    <Link href={`${post.github_link}`} target="_blank">View on Github</Link>
                    </Button>
                    <SubmitChallenge serial={post.serial} title={post.title} />
                </div>
            </article>
        </div>
    )
}

export default NewClient

I imports client component in server component and i want to use scroll to top in my client component

but it is not working as expected
it not going on top when i click on scroll to top button