Estoy aprendiendo a usar useContext y useReducer juntos, pero recibo un error que no he logrado resolver:

TypeError no detectado: el objeto no es iterable (no se puede leer la propiedad Symbol(Symbol.iterator))

Ocurrió después de desestructurar el contexto dentro de MealItemForm.js. Intenté establecer el valor predeterminado en createContext, importar con y sin llaves, etc. Estoy tratando de enviar la función dentro del componente secundario. ¿Alguna idea?

MealItemForm.js

 import React,{useContext} from 'react'; import MeatContext from '../store/meat-context'; import Input from './Input'; import styles from "./MealItemForm.module.css" function MealItemForm(props) { const [meatState,dispatchMeatState]=useContext(MeatContext) const handleClick=(event)=>{ event.preventDefault(); } return ( <form className={styles.form}> <Input/> <button onClick={handleClick}>+ Add</button> </form> ); } export default MealItemForm;

contexto-carne.js

 import React,{useReducer,useState} from 'react'; const MeatContext = React.createContext({meatState:[]}); export function MeatContextProvider(props) { const meatReducer = (state, action) => { if (action.type === 'ADD_MEAT') { return [...meatState]; } return { }; }; const [meatState, dispatchMeatState] = useReducer(meatReducer, [ ] ); return ( <MeatContext.Provider value={{meatState:meatState,dispatchMeatState:dispatchMeatState}}> {props.children} </MeatContext.Provider> ); } export default MeatContext