Getting "Invalid hook call" on button click in Create Item

[kaimoeller]

trafficstars

Getting this warning (and subsequent errors) on button click for the modal dialog. React 18.2.0

Warning: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons: ..

Uncaught TypeError: Cannot read properties of null (reading 'useRef') at Object.useRef (react.development.js:1630:1) at ModalDimmer (ModalDimmer.js:20:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at HTMLUnknownElement.callCallback (react-dom.development.js:4164:1) at Object.invokeGuardedCallbackDev (react-dom.development.js:4213:1) at invokeGuardedCallback (react-dom.development.js:4277:1) at beginWork$1 (react-dom.development.js:27451:1) at performUnitOfWork (react-dom.development.js:26557:1) useRef @ react.development.js:1630 ModalDimmer @ ModalDimmer.js:20 renderWithHooks @ react-dom.development.js:16305 mountIndeterminateComponent @ react-dom.development.js:20074 beginWork @ react-dom.development.js:21587 callCallback @ react-dom.development.js:4164 invokeGuardedCallbackDev @ react-dom.development.js:4213 invokeGuardedCallback @ react-dom.development.js:4277 beginWork$1 @ react-dom.development.js:27451 performUnitOfWork @ react-dom.development.js:26557 workLoopSync @ react-dom.development.js:26466 renderRootSync @ react-dom.development.js:26434 performSyncWorkOnRoot @ react-dom.development.js:26085 flushSyncCallbacks @ react-dom.development.js:12042 flushSyncCallbacksOnlyInLegacyMode @ react-dom.development.js:12021 batchedUpdates$1 @ react-dom.development.js:26148 batchedUpdates @ react-dom.development.js:3991 dispatchEventForPluginEventSystem @ react-dom.development.js:9287 dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465 dispatchEvent @ react-dom.development.js:6457 dispatchDiscreteEvent @ react-dom.development.js:6430 react-dom.development.js:18687 The above error occurred in the <ModalDimmer> component:

at ModalDimmer (http://localhost:3000/static/js/bundle.js:192554:24)
at RefFindNode (http://localhost:3000/static/js/bundle.js:152598:35)
at Ref (http://localhost:3000/static/js/bundle.js:152539:24)
at RefFindNode (http://localhost:3000/static/js/bundle.js:152598:35)
at Ref (http://localhost:3000/static/js/bundle.js:152539:24)
at PortalInner (http://localhost:3000/static/js/bundle.js:184275:29)
at Portal (http://localhost:3000/static/js/bundle.js:183925:29)
at Modal (http://localhost:3000/static/js/bundle.js:191972:29)
at CreateItemModal (http://localhost:3000/static/js/bundle.js:434:5)
at div
at ItemDashboard (http://localhost:3000/static/js/bundle.js:630:1)
at div
at Segment (http://localhost:3000/static/js/bundle.js:187500:24)
at App (http://localhost:3000/static/js/bundle.js:91:5)
at g (http://localhost:3000/static/js/bundle.js:16746:15)
at AuthenticatorProvider (http://localhost:3000/static/js/bundle.js:15872:5)
at l

Consider adding an error boundary to your tree to customize error handling behavior. Visit https://reactjs.org/link/error-boundaries to learn more about error boundaries. logCapturedError @ react-dom.development.js:18687 update.callback @ react-dom.development.js:18720 callCallback @ react-dom.development.js:13923 commitUpdateQueue @ react-dom.development.js:13944 commitLayoutEffectOnFiber @ react-dom.development.js:23391 commitLayoutMountEffects_complete @ react-dom.development.js:24688 commitLayoutEffects_begin @ react-dom.development.js:24674 commitLayoutEffects @ react-dom.development.js:24612 commitRootImpl @ react-dom.development.js:26823 commitRoot @ react-dom.development.js:26682 performSyncWorkOnRoot @ react-dom.development.js:26117 flushSyncCallbacks @ react-dom.development.js:12042 flushSyncCallbacksOnlyInLegacyMode @ react-dom.development.js:12021 batchedUpdates$1 @ react-dom.development.js:26148 batchedUpdates @ react-dom.development.js:3991 dispatchEventForPluginEventSystem @ react-dom.development.js:9287 dispatchEventWithEnableCapturePhaseSelectiveHydrationWithoutDiscreteEventReplay @ react-dom.development.js:6465 dispatchEvent @ react-dom.development.js:6457 dispatchDiscreteEvent @ react-dom.development.js:6430 react.development.js:1630 Uncaught TypeError: Cannot read properties of null (reading 'useRef') at Object.useRef (react.development.js:1630:1) at ModalDimmer (ModalDimmer.js:20:1) at renderWithHooks (react-dom.development.js:16305:1) at mountIndeterminateComponent (react-dom.development.js:20074:1) at beginWork (react-dom.development.js:21587:1) at beginWork$1 (react-dom.development.js:27426:1) at performUnitOfWork (react-dom.development.js:26557:1) at workLoopSync (react-dom.development.js:26466:1) at renderRootSync (react-dom.development.js:26434:1) at performSyncWorkOnRoot (react-dom.development.js:26085:1)