Hi I am new to NextJS and trying to build a pagination component. In this I am using a custom hook to fetch and navigate(next and previous page) and trying to import it into a server side component to then destructure the data from that custom hook and display it. But I keep getting this error:

Error: (0 , _app_usePaginate__WEBPACK_IMPORTED_MODULE_2__.default) is not a function

Here are the files:
usePaginate.ts (under app directory)

"use client"
import { useState, useEffect, useCallback } from 'react'

const usePaginate = () => {
    const [data, setData] = useState([])
    const [currentPage, setCurrentPage] = useState(1)

    console.log("reached here in step 2")

    const fetchData = useCallback(async () => {
        try {
            let response = await fetch(`https://give-me-users-forever.vercel.app/api/users/${currentPage}/next`)
            let jsonResponse = await response.json();

            setData(jsonResponse.users);
        } catch (error) {
            console.log(error)
        }
    }, [currentPage])

    const nextPage = () => setCurrentPage(prev => prev + 1)

    const prevPage = () => {
        if (currentPage > 1) { setCurrentPage(prev => prev - 1) }
    }

    useEffect(() => {
        fetchData()
    }, [currentPage, fetchData])

    return { data, currentPage, nextPage, prevPage }
}

export default usePaginate

and page.tsx (under app directory):

import usePaginate from '@/app/usePaginate'

const Home = async () => {

  const { data, currentPage, nextPage, prevPage } = usePaginate()

  return (
    <main className="flex min-h-screen flex-col items-center justify-between p-24">

      Data list:
      {data.map((item: any) => (<div key={item.id}>{item.FirstNameLastName}</div>))}
    </main>
  );
}

export default Home```




I tried switching files in and out of app directory. I tested with other client side components inside ```page.tsx``` and they worked fine.