Using ApolloClient useSubscription in Class Components

ApolloClient.js

import { ApolloClient, HttpLink, InMemoryCache, split } from "@apollo/client";
import { GraphQLWsLink } from '@apollo/client/link/subscriptions';
import { createClient } from "graphql-ws";
import { getMainDefinition } from "@apollo/client/utilities";

const scheme = ( proto ) =>
    window.location.protocol === "https:" ? `${ proto }s` : proto;

const splitter = ( { query } ) => {
    const { kind, operation } = getMainDefinition( query ) || {};
    const isSubscription =
        kind === "OperationDefinition" && operation === "subscription";
    return isSubscription;
};

const GRAPHQL_ENDPOINT = 'localhost:4000';
const cache = new InMemoryCache();
const options = { reconnect: true };

const wsURI = `${ scheme( "ws" ) }://${ GRAPHQL_ENDPOINT }/graphql`;
const httpurl = `${ scheme( "https" ) }://${ GRAPHQL_ENDPOINT }/graphql`;

const wsLink = new GraphQLWsLink( createClient( { url: wsURI, connectionParams: { options } } ) );
const httpLink = new HttpLink( { uri: httpurl } );
const link = split( splitter, wsLink, httpLink );
const client = new ApolloClient( { link, cache } );
export default client;

ApolloClientTestComponent.tsx

import React from 'react';

export interface MyProps extends React.PropsWithChildren<{}> {
    apolloSubscriptionData?: any;
}
  
export interface MyState {
    isLoading?: Boolean;
    subscriptionData?: any;
}
  
export default class ApolloClientTestComponent extends React.Component<MyProps, MyState> {
  
    private _onApolloSubscriptionUpdate ( data: any ) {
      
        this.setState({isLoading: true});
  
        console.log(data);

        // Do Magical Stuff here, API CALLS or whatever! and yes you can use async/await here

        this.setState({isLoading: false, subscriptionData: data});
    }
  
    componentDidUpdate ( prevProps: Readonly<GlobalContextProviderProps>, prevState: Readonly<{}>, snapshot?: any ): void {
        if ( this.props.apolloSubscriptionData.timestamp !== prevProps.apolloSubscriptionData.timestamp )
        {
            this._onApolloSubscriptionUpdate( this.props.apolloSubscriptionData );
        }
    }
  
  render() {
    return (<> GQL Data Number: { this.state.subscriptionData?.numberIncremented } </>);
  }
  
}

App.tsx

import { ApolloProvider } from "@apollo/client";
import client from "clients/ApolloClient";

function App () {
  return (
    <ApolloProvider client={ client }>
      <QLSubscription>
        <ApolloClientTestComponent />
      </QLSubscription>
     </ApolloProvider>
  );
}

export default App;

QLSubscription.tsx

import { gql, useSubscription } from "@apollo/client";
import React from "react";
export default function QLSubscription ( props: any ) {
    const { data, loading, error } = useSubscription( gql`
    subscription Subscription {
        numberIncremented
      }
    ` );

    return React.cloneElement( props.children, {
        apolloSubscriptionData: {
            data,
            loading,
            error,
            timestamp: Date.now()
        }
    } );
}