Use React provider and hook inside Stencil component

Stencil
1

I want to integrate a library @celo-tools/use-contractkit has the following instructions:

  1. Wrap your application with ContractKitProvider
import { ContractKitProvider } from '@celo-tools/use-contractkit';
import '@celo-tools/use-contractkit/lib/styles.css';

function WrappedApp() {
  return (
    <ContractKitProvider dappName="My awesome dApp">
      <App />
    </ContractKitProvider>
  );
}

function App() {
  // your application code
}
  1. Access the useContractKit hook within App
import { useContractKit } from '@celo-tools/use-contractkit';

function App() {
  const { kit, address } = useContractKit();

  return (
    ...
  );
}

Since Stencil uses class components, how to proceed?