How can i pass return variable from exported function to React's useState whenever I call this exported function?

I Have function for searching word from database in this code

export async function searchHandler (text) {
  const result = await searchDB(text);
  return result;
}

and this function is getting called inside Navbar component and variable is being returned by callback prop. The problem is I need to get this data from searchHandler be updated in React's useState inside index.js Component.

    export default function Home({data}){
      const [loading, setloading] = useState(true);
      const [newData, setNewData] = useState(data);

      //Need to call this function in searchHandler()
      const updateData = (d) => {
        setNewData(d);
      }

      return (
         <>
           {newData && <Data source={newData} />}
         </>
      );
   }

I know i can just put Navbar component inside return value of Home and put updateData as callback function prop but I have Layout component too to avoid doing this kind of stuff. Btw. the {data} prop from Home component is return value from getStaticProps.

EDIT: Okay I managed to do this by using useContext hook. Thanks to Marco