apollo-client: Getting cannot read property 'subscribeToMore' of undefined

Intended outcome:

subscribeToMore returning the subscription in every refresh.

Actual outcome:

subscribeToMore works on the first load of component. The time it refreshes or it’s saved, it returns subscribeToMore as undefined.

How to reproduce the issue:

const QUERY = gql`
	  query {
	    getEventsSection(id: "trending") {
	      _id,
	      events 
	    }
	  }
	`;

	const SUBSCRIPTION = gql`
		subscription {
		  getEventsSection(id: "trending") {
		    _id,
		    events 
		  }
		}
	`;

	const { loading, error, data, subscribeToMore } = useQuery(QUERY);

	useEffect(() => {
		subscribeToMore({
			document: SUBSCRIPTION,
			updateQuery: (prev, {subscriptionData}) => {
				console.log(subscriptionData);
			}
		});
	}, [subscribeToMore])

Versions

System: OS: macOS Mojave 10.14.5 Binaries: Node: 10.20.1 - /usr/local/opt/node@10/bin/node Yarn: 1.15.2 - /usr/local/bin/yarn npm: 6.14.4 - /usr/local/opt/node@10/bin/npm Browsers: Chrome: 83.0.4103.97 Edge: 83.0.478.45 Firefox: 75.0 Safari: 13.1.1 npmPackages: @apollo/react-hooks: ^3.1.5 => 3.1.5 apollo-boost: ^0.4.9 => 0.4.9 apollo-cache-inmemory: ^1.6.6 => 1.6.6 apollo-client: ^2.6.10 => 2.6.10 apollo-link: ^1.2.14 => 1.2.14 apollo-link-context: ^1.0.20 => 1.0.20 apollo-link-error: ^1.1.13 => 1.1.13 apollo-link-http: ^1.5.17 => 1.5.17 apollo-link-ws: ^1.0.20 => 1.0.20 apollo-upload-client: ^13.0.0 => 13.0.0 apollo-utilities: ^1.3.4 => 1.3.4