Uncaught Error: useSmartCard() must be wrapped in <SmartCardProvider>

Hi there,
I am using “@atlaskit/renderer”: “^101.1.0” but got the error when rendering the link URL

index.js:8 Uncaught Error: useSmartCard() must be wrapped in <SmartCardProvider>
    at useSmartLinkContext (index.js:8:1)
    at useSmartLinkAnalytics (useSmartLinkAnalytics.js:44:1)
    at CardWithURLRenderer (loader.js:60:1)
    at renderWithHooks (react-dom.development.js:14803:1)
    at mountIndeterminateComponent (react-dom.development.js:17482:1)
    at beginWork (react-dom.development.js:18596:1)
    at HTMLUnknownElement.callCallback (react-dom.development.js:188:1)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:237:1)
    at invokeGuardedCallback (react-dom.development.js:292:1)
    at beginWork$1 (react-dom.development.js:23203:1)
    at performUnitOfWork (react-dom.development.js:22154:1)
    at workLoopSync (react-dom.development.js:22130:1)
    at performSyncWorkOnRoot (react-dom.development.js:21756:1)
    at react-dom.development.js:11089:1
    at unstable_runWithPriority (scheduler.development.js:653:1)
    at runWithPriority$1 (react-dom.development.js:11039:1)
    at flushSyncCallbackQueueImpl (react-dom.development.js:11084:1)
    at flushSyncCallbackQueue (react-dom.development.js:11072:1)
    at scheduleUpdateOnFiber (react-dom.development.js:21199:1)
    at Object.enqueueSetState (react-dom.development.js:12639:1)
    at push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:471:1)
    at update (index.js:205:1)
    at index.js:215:1

In my package.json

"dependencies": {
....
   "@atlaskit/renderer": "^101.1.0",
    "@atlaskit/smart-card": "^22.2.0",
    "@atlaskit/link-provider": "^1.2.8",
...
}

Do you have any idea about this error?
Cheers,