In React is it better to prop drill or use a custom hook in every component?

I get the answer to this question could be “it depends” but I’ve got an app where we are passing tons of props down. It’s getting unmaintable especially when some components have 20+ props.

So I decided to extract it to a custom hook but my custom hook makes a graphql call, so this feels like it would be an expensive operation?

So do I keep prop drilling or do I use a custom hook everywhere? or do I skip the graphql call on certain instances?

and also does each hook maintain the overall state or each individual state? if I update the state inside a hook does that propagate to all instances of calling the hook?

for example

export const useCustomHook = ({ id }: { id: string }) => {
  const [showSomething, setShowSomething] = useState(false)

  const { data, loading } = useGetBooks({
    variables: { id },
  })

  const books = { ...data?.books, showSomething }

  return {
    loading,
    books,
    showSomething,
    setShowSomething,
  }
}

Should I call this hook in every component? Or is that bad practice? Or do I call it once at the top level and then pass all props down?