Tengo el siguiente código, el problema está en la parte donde llamo a la función RemoveProduct en la función de mapa:

 function AddOrder() { const d = new Date(); let text = d.toString(); const [addOrder] = useMutation(queries.ADD_ORDER); const [editUser] = useMutation(queries.EDIT_USER_CART); const [editProduct] = useMutation(queries.EDIT_PRODUCT); function RemoveProduct (x) { let getProd = useQuery(queries.GET_PRODUCTS_BY_ID, { fetchPolicy: "network-only", variables: { _id : x._id }, }); console.log(getProd.quantity) console.log(x.quantity) let a = getProd.quantity - x.quantity console.log(a) editProduct({ variables: { _id : x._id, quantity: a }, }); return null; } const { currentUser } = useContext(AuthContext); if (error) { return <h1> error</h1>; } else if (loading) { return <h1> loading</h1>; } else if (data && getUserOrders.data && currentUser && data.getUser.cart.length > 0) { let newCart = []; let total = 0; for (let i = 0; i < data.getUser.cart.length; i++) { total += data.getUser.cart[i].price * data.getUser.cart[i].quantity; newCart.push({ orderedQuantity: data.getUser.cart[i].quantity, _id: data.getUser.cart[i]._id, name: data.getUser.cart[i].name, image: data.getUser.cart[i].image, price: data.getUser.cart[i].price, }); } newCart.map((x) => RemoveProduct(x)) editUser({ variables: { id: currentUser.uid, cart: [], }, }); } } export default AddOrder;

Recibo el siguiente error cuando ejecuto este código:

 Uncaught Error: Rendered more hooks than during the previous render.

¿Cómo puedo arreglar esto? Intenté crear un componente separado para RemoveProducts y llamar a esta función, pero tampoco funcionó.