Invalid Hook Call for GraphQL Query

Question

I am trying to run a simple graphql like this. I want to display all data fetched on the screen (for now the console.log would also work). However, everytime I click the button, I get the invalid hook issue and my page crashes.

I checked this :https://reactjs.org/warnings/invalid-hook-call-warning.html but I don't think i am doing any of these things wrong.

const ShowUsersQuery = gql`
query {
  users {
    nodes {
      id, firstName, email
    }
    totalCount
  }
}`;

function FindUsers() {
  const { loading, error, data } = useQuery(ShowUsersQuery);
  if (loading) return 'Loading...';
  if (error) return `Error! ${error.message}`;
  console.log('Data: ', data.users.nodes.firstName);
}

export default function UserSearchPage(){
  const [criteria, setCriteria] = useState('');
  const [searchItem, setSearchItem] = useState('');
  return (
    <div>
      <PermanentDrawerLeft></PermanentDrawerLeft>
      <div className='main-content'>
          <button 
          onClick={FindUsers}
          >HELLO</button>
            </div>
          )
    </div>
  );
}