@apollo/client in React, passing header is not working

I am trying to pass header in @apollo/client useQueryQuery but it is not getting passed.
Click on login button will call loginRequest. Its a REST call which is using Graphql.
IMPORTANT -> in loginRequest is getting called at many places, some places need to pass the header and some place not.
Below I added query and a sample example of code.

QUERY

export const USER_LOGIN = gql`
  fragment LoginInput on REST {
    username: String
    password: String
  }
  query UserLogin($input: LoginInput!) {
    userLogin(input: "input", body: $input)
      @rest(
        type: "Any"
        path: "iam/api/sso/authentication/login"
        method: "POST"
        bodyKey: "body"
      ) {
      access_token
      accessTokenExpired
      lastDateTimeAccessToken
      lastDateTimeRefreshToken
      expires_in
      refresh_expires_in
      refresh_token
      token_type
      id_token
    }
  }
`;

function Login(){

const [loginRequest, data] = useLazyQuery<{userLogin: LoginResponse;}>(USER_LOGIN, {
fetchPolicy: "network-only",
})
const handleLogin=()=>{
  loginRequest(
    variables: {
        input: {
          username: `[email protected]`,
          password: 123,
        },
    context: {
        headers: {
            "x-custom-header": "abc"
        }
       }
      }
)
}
return <>
  <button onClick={handleLogin}> Login</button>
</>
}