React js unable to render when using graphql useQuery with parameters

Question

I have already checked my imports and exports and also the graphql query that I have made... I use useState to handle the inputs on both username and password. then I made a button that will call an arrow function that will set the inputs and match and execute it on the gql that I have made... It does not return any errors or warnings but the input fields and button doesn't render

This is my function...

function LoginAdmin(){
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [login,{loading,error,data}] = useQuery(LOGIN_CLIENT);

  const logingIn = () => {
      login({
          variables: {
              username: username,
              password: password
          }
      })
  }
  if (loading) return <p>loading...</p>;
  if(error) return <p>Error: ({error.message}</p>;
  if(data) return <p>login success</p>;
  return(
      <div>
          <input type="text" onChange={(e) => {
            setUsername(e.target.value);
          }}/>
          <input type="password" onChange={(e) => {
            setPassword(e.target.value);
          }}/>
          <button onClick={logingIn}>login</button>
      </div>
  )
}

This is my gql

const LOGIN_CLIENT = gql`
query whoClients($username: String!, $password: String!){
    whoClients(username:$username, password:$password){
      id
      username
      password
      firstName
      lastName
      blockNumber
      street
      barangay
      city
      region
      contactNumber
      emailAddress
    }
  }
`;