Charts are not showing up and console is giving out errors

[brickandcanvas]

Im testing out the code from this page:
https://github.com/react-financial/react-financial-charts/blob/main/packages/stories/src/features/StockChart.tsx

and I finally got it to "work" but the charts are not visible this way.

and when I check console its throwing out these errors.

Warning: Legacy context API has been detected within a strict-mode tree.

The old API will be supported in all 16.x releases, but applications using it should migrate to the new version.

Please update the following components: Chart, ChartCanvas, CrossHairCursor, GenericChartComponent, GenericComponent, XAxis, YAxis, ZoomButtons

Learn more about this warning here: https://reactjs.org/link/legacy-context
at ChartCanvas (http://localhost:3000/static/js/vendors~main.chunk.js:108507:5)
at StockChart (http://localhost:3000/static/js/main.chunk.js:2071:5)
at WithRatio (http://localhost:3000/static/js/vendors~main.chunk.js:128255:9)
at div
at AutoSizer (http://localhost:3000/static/js/vendors~main.chunk.js:128709:5)
at WithSize (http://localhost:3000/static/js/vendors~main.chunk.js:128320:12)
at WithOHLCData (http://localhost:3000/static/js/main.chunk.js:1914:9)
at div
at O (http://localhost:3000/static/js/vendors~main.chunk.js:324119:6)
at DashboardHeader
at div
at O (http://localhost:3000/static/js/vendors~main.chunk.js:324119:6)
at Dashboard
at Route (http://localhost:3000/static/js/vendors~main.chunk.js:308604:29)
at Switch (http://localhost:3000/static/js/vendors~main.chunk.js:308806:29)
at Web3ReactManager (http://localhost:3000/static/js/main.chunk.js:16560:3)
at div
at O (http://localhost:3000/static/js/vendors~main.chunk.js:324119:6)
at div
at O (http://localhost:3000/static/js/vendors~main.chunk.js:324119:6)
at Router (http://localhost:3000/static/js/vendors~main.chunk.js:308239:30)
at Suspense
at App (http://localhost:3000/static/js/main.chunk.js:27069:83)
at ModalProvider (http://localhost:3000/static/js/main.chunk.js:74294:3)
at Ge (http://localhost:3000/static/js/vendors~main.chunk.js:324030:67)
at ThemeContextProvider (http://localhost:3000/static/js/main.chunk.js:265:3)
at Provider (http://localhost:3000/static/js/vendors~main.chunk.js:304813:20)
at Web3ReactProvider (http://localhost:3000/static/js/vendors~main.chunk.js:135334:27)
at Web3ReactProvider (http://localhost:3000/static/js/vendors~main.chunk.js:135334:27)
at Providers (http://localhost:3000/static/js/main.chunk.js:107:3)
console. @ index.js:1
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
(anonymous) @ react-dom.development.js:11587
push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushLegacyContextWarning @ react-dom.development.js:11571
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:23819
commitRootImpl @ react-dom.development.js:23005
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
enqueueSetState @ react-dom.development.js:12467
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:365
(anonymous) @ withOHLCData.tsx:54
Promise.then (async)
componentDidMount @ withOHLCData.tsx:48
commitLifeCycles @ react-dom.development.js:20663
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
(anonymous) @ manager.ts:144
Promise.then (async)
(anonymous) @ manager.ts:131
Promise.then (async)
(anonymous) @ manager.ts:131
_catch @ helpers.js:565
(anonymous) @ manager.ts:131
(anonymous) @ index.tsx:33
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:590
flushWork @ scheduler.development.js:545
performWorkUntilDeadline @ scheduler.development.js:157
index.js:1 Warning: Using UNSAFE_componentWillMount in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

• Move code with side effects to componentDidMount, and set initial state in the constructor.

Please update the following components: GenericChartComponent, GenericComponent
console. @ index.js:1
printWarning @ react-dom.development.js:67
error @ react-dom.development.js:43
push../node_modules/react-dom/cjs/react-dom.development.js.ReactStrictModeWarnings.flushPendingUnsafeLifecycleWarnings @ react-dom.development.js:11506
flushRenderPhaseStrictModeWarningsInDEV @ react-dom.development.js:23822
commitRootImpl @ react-dom.development.js:23005
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
enqueueSetState @ react-dom.development.js:12467
push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:365
(anonymous) @ withOHLCData.tsx:54
Promise.then (async)
componentDidMount @ withOHLCData.tsx:48
commitLifeCycles @ react-dom.development.js:20663
commitLayoutEffects @ react-dom.development.js:23426
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
commitRootImpl @ react-dom.development.js:23151
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
commitRoot @ react-dom.development.js:22990
performSyncWorkOnRoot @ react-dom.development.js:22329
(anonymous) @ react-dom.development.js:11327
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushSyncCallbackQueueImpl @ react-dom.development.js:11322
flushSyncCallbackQueue @ react-dom.development.js:11309
scheduleUpdateOnFiber @ react-dom.development.js:21893
dispatchAction @ react-dom.development.js:16139
(anonymous) @ manager.ts:144
Promise.then (async)
(anonymous) @ manager.ts:131
Promise.then (async)
(anonymous) @ manager.ts:131
_catch @ helpers.js:565
(anonymous) @ manager.ts:131
(anonymous) @ index.tsx:33
invokePassiveEffectCreate @ react-dom.development.js:23487
callCallback @ react-dom.development.js:3945
invokeGuardedCallbackDev @ react-dom.development.js:3994
invokeGuardedCallback @ react-dom.development.js:4056
flushPassiveEffectsImpl @ react-dom.development.js:23574
unstable_runWithPriority @ scheduler.development.js:646
runWithPriority$1 @ react-dom.development.js:11276
flushPassiveEffects @ react-dom.development.js:23447
(anonymous) @ react-dom.development.js:23324
workLoop @ scheduler.development.js:590
flushWork @ scheduler.development.js:545
performWorkUntilDeadline @ scheduler.development.js:157
index.js:1 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.

• Move data fetching code or side effects to componentDidUpdate.
• If you're updating state whenever props change, refactor your code to use memoization techniques or move it to static getDerivedStateFromProps. Learn more at: https://reactjs.org/link/derived-state

Please update the following components: ChartCanvas, GenericChartComponent, GenericComponent

Do I need to fix something on my end?