How can I dynamically fetch data from an api using T3 stack?

Question

How can I update the page or the information using the T3 stack

'use client'

import useFetchBooks from "~/hooks/useFetchData";
import SearchArea from "./_components/home/SearchArea";



export default async function Home() {

  let result = {
    items: []
  };

  const fetchBooks = async (e:string) => {
    result = await useFetchBooks(e);
    if(result){
      console.log(result);
      // console.log(result.items[0]);
    }
  };

  return <div className="bg-[#FFF8F3] h-[50rem] felx flex-col justify-center items-center w-full p-5">
    <SearchArea fetchBooks={fetchBooks} />
    {result.items 
      ? 'Hola' 
      : 'Adios'
    }
  </div>
  
}

This is my code, but I don't understand what I can do to dynamically change it's value.

I want to use the API of google to fetch the information of different books and display it on the screen, but I don't know how to dynamically update the page without causing an error. I tried useState and useEffect, but both seem to have a problem and cause it to crash because the fetch function is a server component.