Are you using App Router? if yes then use "use client" directive on top of the page. but I will suggest you that you should directly make fetch request on server side, so it will not need to use the hooks.

const getData = async () => {
  const res = fetch('https://jsonplaceholder.typicode.com/posts')
      if(!res.ok){
        notFound() // @next/navigation
      }
      const data =  await res.json()
      console.log(data);
      return data;

}
// This page becomes a async page for seerver side
const Projects = async ({}: Props) => {
const data = await getData()

  return (
        <DataList data={data} />
  );
};


export default DataPage;```
 // and use loading.tsx in app router for handling the Loading