react-apollo only supports one definition per HOC

The browser is returning an error when I load my React app:

invariant.ts:12 Uncaught Invariant Violation: react-apollo only supports one definition per HOC. [object Object] had 0 definitions. You can use 'compose' to join multiple operation types to a component

// myComponent

import { gql, useQuery } from '@apollo/client';
import React, { FC } from 'react';
import './MyComponent.css';

interface MyComponentProps {}

const GET_HELLO = gql`
  type Query {
    hello: String
  }
`;

const MyComponent: FC<MyComponentProps> = () => {
  const sayHi = useQuery(GET_HELLO)
  const {data, error, loading} = sayHi;

  return (
    <div className="MyComponent">
      data: {data}
    </div>
  )
}

export default MyComponent

// App.tsx

import './App.css';

import { ApolloProvider, useQuery, gql } from '@apollo/client';
import { apolloClient } from './server/apolloClient';
import MyComponent from './components/MyComponent/MyComponent.lazy';

const App = () => {
  return (
    <ApolloProvider client={apolloClient}>
      <div className="App">
        <header className="App-header">
          <MyComponent />
        </header>
      </div>
    </ApolloProvider>
  );
}

export default App;

Versions:

• "@apollo/client": "^3.6.9",
• "apollo-server-express": "^3.9.0",
• "express": "^4.18.1",
• "express-graphql": "^0.12.0",
• "graphql": "^16.5.0",