Dependency Cycle Issue in React

Question

I have created a global context in my app and I have a wanted to show ErrorMessage and Login if they are triggered to open. So I put them in a context. The problem is that Login outputs a dependency cycle issue. I think this is because ErrorMessage is also found on Login if they entered a wrong email or password. How will I be able to fix this? I think this is because of importing useGlobalContext in Login. I'm thinking of creating a separate context for auth?

import dynamic from 'next/dynamic'
import React, { createContext, useState, useContext } from 'react'

export const GlobalContext = createContext()

export const useGlobalContext = () => {
  return useContext(GlobalContext)
}

const ErrorMessage = dynamic(
  () => import('../../../components/Modal/ErrorMessage'),
  {
    ssr: false,
  }
)

const Login = dynamic(() => import('../../../components/Login'), {
  ssr: false,
})      --------> Dependency cycle via....

export const GlobalProvider = ({ children }) => {
  const [showLogin, setShowLogin] = useState(false)
  const [showError, setShowError] = useState(false)
  const [errorMessage, setErrorMessage] = useState('')

  const toggleLogin = () => setShowLogin((prevState) => !prevState)

  return (
    <GlobalContext.Provider
      value={{
       showLogin,
       setShowLogin,
        toggleLogin,
        showError,
        setShowError,
        setErrorMessage,
        errorMessage,
      }}
    >
      {children}

      <Login toggleLogin={toggleLogin} />

      <ErrorMessage
        message={errorMessage}
        setShowModal={setShowError}
        showModal={showError}
      />
    </GlobalContext.Provider>
  )
}

Login.js

import { useGlobalContext } from '../../libs/context/globalContext'

    const LoginForm = ({ toggleLogin = () => {} }) => {
      const { setShowError, setErrorMessage } = useGlobalContext()
    
    
    }

   export default LoginForm