Invalid hook call for react-dom. What can I do?

Question

I want to create a global modal component using redux/toolkit and manage it globally. When I click the drop-down menu, I create the message I want to display the modal, and when I click the Ok or Cancel button and background, I try to close it.

There is no problem with the event to open the modal, but to close it, send the following error. Attached is the contents checked according to the error message.

1. pacakge.json:

   "react": "^18.2.0",
   "react-copy-to-clipboard": "^5.1.0",
   "react-dom": "^18.2.0",
   

2. modalSlice.js

   import { createSlice } from '@reduxjs/toolkit'
   
   const initialState = {
     modalContent: '',
     isOpen: false,
   }
   
   export const modalSlice = createSlice({
     name: 'modal',
     initialState,
     reducers: {
       openModal: (state, actions) => {
         const { modalContent } = actions.payload
         const updateState = {
           ...state,
           isOpen: true,
           modalContent,
         }
         return updateState
       },
       closeModal: (state, actions) => {
         console.log(actions)
         const updateState = {
           ...initialState,
         }
         return updateState
       },
     },
   })
   
   export const { openModal, closeModal } = modalSlice.actions
   
   export default modalSlice.reducer
   

   Modal.js

   const Modal = () => {
     const dispatch = useDispatch
     const { modalContent } = useSelector((state) => state.modal)
     const modalHandler = (e) => {
       dispatch(closeModal)
     }
     return (
       <>
         <ModalContainer>
           <ModalBack onClick={modalHandler} />
           <ModalContentWrapper>
             <ModalContent>{modalContent}</ModalContent>
             <ModalBtnWrapper>
               <ModalBtn onClick={modalHandler}>취소</ModalBtn>
               <ModalBtn onClick={modalHandler}>확인</ModalBtn>
             </ModalBtnWrapper>
           </ModalContentWrapper>
         </ModalContainer>
       </>
     )
   }
   

3. npm ls react

   [email protected] /Users/mary/231014 wedding/mobile/wedding_reception
   ├─┬ @fortawesome/[email protected]
   │ └── [email protected] deduped
   ├─┬ @reduxjs/[email protected]
   │ └── [email protected] deduped
   ├─┬ @testing-library/[email protected]
   │ └── [email protected] deduped
   ├─┬ [email protected]
   │ └── [email protected] deduped
   ├─┬ [email protected]
   │ └── [email protected] deduped
   ├─┬ [email protected]
   │ ├── [email protected] deduped
   │ └─┬ [email protected]
   │   └── [email protected] deduped
   ├─┬ [email protected]
   │ ├─┬ [email protected]
   │ │ └── [email protected] deduped
   │ └── [email protected] deduped
   ├─┬ [email protected]
   │ └── [email protected] deduped
   ├── [email protected]
   └─┬ [email protected]
     └── [email protected] deduped
   

Answer 1

Invalid Hook Call Warning You might be breaking the Rules of Hooks.

it should be written like that

 const dispatch = useDispatch();