How can I fix this circular dependency error with my custom hooks and components in React?

I have a global state, in which there are several custom hooks that use the global state and then there is a component that uses the global state and the custom hooks. This is causing a circular dependency error. Does anyone have any idea how to solve this problem?<br><br>Here is my code:<br><br>In src/context we have the global state:<br><br>```javascript<br>// src/context/reducer.js<br>export const addItem = (state, item) => [...state, item];<br>export const removeItem = (state, item) => state.filter((i) => i.id !== item.id);<br>export const addTotal = (state, item) => state + item.price;<br>export const removeTotal = (state, item) => state - item.price;<br>\`<br><br>```javascript<br>// src/context/context.js<br>import React, { createContext, ContextType, Dispatch, useReducer } from 'react';<br>import { addItem, removeItem, addTotal, removeTotal } from './reducer';<br><br>interface IContext {<br> cart: { price: number; id: number }[];<br> total: number;<br> dispatch: Dispatch<{ type: string; item: { price: number; id: number } }>;<br>}<br><br>const context = createContext<IContext>({ cart: [], total: 0, dispatch: () => {} });<br><br>const ContextProvider = ({ children }: { children: any }) => {<br> const [cart, setCart] = useReducer(addItem, []);<br> const [total, setTotal] = useReducer(addTotal, 0);<br><br> const handleDispatch = (actionType: string, item: { id: number; price: number }) => {<br> switch (actionType) {<br> case 'ADD_TO_CART':<br> setCart({ type: 'ADD_ITEM', item });<br> setTotal({ type: 'ADD_ITEM', item });<br> break;<br> case 'REMOVE_FROM_CART':<br> setCart({ type: 'REMOVE_ITEM', item });<br> setTotal({ type: 'REMOVE_ITEM', item });<br> break;<br> case 'CHANGE_CART':<br> setCart({ type: 'CHANGE_ITEM', item });<br> setTotal({ type: 'CHANGE_ITEM', item });<br> break;<br> case 'CHANGE_TOTAL':<br> setTotal({ type: 'CHANGE_ITEM', item });<br> break;<br> }<br> };<br><br> return <context.Provider value={{ cart, total, dispatch: handleDispatch }}>{children}</context.Provider>;<br>};<br><br>export { ContextProvider, context };<br>```<br><br>In the src/hooks folder I have a custom hook that uses the global state:<br><br>```javascript<br>// src/hooks/useCart.js<br>import { useContext } from 'react';<br>import { context, IContext } from '../context/context';<br><br>export default function useCart() {<br> const { cart } = useContext(context) as IContext;<br><br> const getCart = () => cart;<br><br> return { getCart };<br>}<br>```<br><br>Now I want to use the above custom hook in a component:<br><br>```javascript<br>// src/main/components/myComponent.js<br>import React from 'react';<br>import { getCart } from './useCart';<br><br>const MyComponent = () => {<br> const { getCart } = useCart();<br><br> const cart = getCart();<br><br> return (<br> <div><br> {cart.map((menuItem) => (<br> <div key={menuItem.id}>{menuItem.price}</div><br> ))}<br> </div><br> );<br>};<br><br>export default MyComponent;<br>```<br><br>This is causing a circular dependency error because both the global state and the custom hook use each other, which creates a circular dependency.<br><br>So my question is, how can I avoid this circular dependency error and use the custom hook with the global state in the component?<br><br>What I have tried so far is to use a React hook like the `useContext` hook, which is especially designed for this type of thing, but I'm still getting the same error. Does anyone have any idea how to solve this problem?<br><br>I hope this information is enough. Thank you for helping me.