Error: Invalid hook call in Apollo useLazyQuery , useMutation, useQuery

As long as the line with useLazyQuery in App.js (code below) is removed, it will display simple “HELLO” message (working well), otherwise, I got the below error message

Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:
1. You might have mismatching versions of React and the renderer (such as React DOM)
2. You might be breaking the Rules of Hooks
3. You might have more than one copy of React in the same app

App.js

import React, { useState } from "react";
import ReactDOM from "react-dom";
import { syncUser as syncRecord } from "./components/util";
import { useLazyQuery } from "@apollo/client";

export default function App(props) {
  console.log("React.version1", React.version);
  console.log("ReactDOM.version1", ReactDOM.version);
  const [syncUser] = useLazyQuery(syncRecord, {}); //CULPRIT LINE
  const [hasToken, setHasToken] = React.useState(false);
  return <div className="App">HELLO</div>;
}

A few things I have checked

1. React version & React DOM version are same in index.js & App.js i.e. 16.13.1
2. I don’t think I broke Hooks rule — useState working well in the same sample code App.js
3. npm ls react returns long tree with multiple react (but other than react at root tree — the rest (part of the library) are using same [email protected] deduped

Apollo Client version

    "@apollo/client": "^3.3.15",
    "@apollo/react-hooks": "^4.0.0",