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

[kaimoeller]

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 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)