Tengo dos componentes, el primero se usa para obtener datos del formulario, el segundo se usa para guardar los datos recopilados. Hay un objeto rideData en AddRideForm.js donde almaceno datos de entrada. Quiero reenviar este objeto al archivo rides-context e insertarlo aquí const [rides, setRides] = useState . ¿Puede decirme por qué no hay datos recopilados en useState () mencionado anteriormente después de imprimirlo en la consola?

AddRideForm.js

 const AddRideForm2 = () => { const [userInput, setUserInput] = useState({ name: "", hour: "", }); const ctx = useContext(RidesContext); const nameHandler = (e) => { setUserInput((prevState) => { return { ...prevState, name: e.target.value }; }); }; const hourHandler = (e) => { setUserInput((prevState) => { return { ...prevState, hour: e.target.value }; }); }; const submitHandler = (e) => { e.preventDefault(); const rideData = { name: userInput.name, hour: userInput.hour, }; ctx.onAdd(rideData); console.log(userInput); console.log(ctx.ridesList); console.log(ctx.onAdd); }; return ( <RidesContextProvider> <form className={classes.addRideFormContainer} onSubmit={submitHandler}> <Input className={classes.addRideFormInput} value={userInput.name} onChange={nameHandler} ></Input> <Input className={classes.addRideFormInput} value={userInput.hour} onChange={hourHandler} ></Input> <button className={classes.addRideFormButton}>Dodaj</button> </form> </RidesContextProvider> ); }; export default AddRideForm2;

paseos-contexto.js

 const RidesContext = React.createContext({ ridesList: {}, onAdd: (data) => {}, onDelete: () => {}, }); export const RidesContextProvider = (props) => { const [rides, setRides] = useState([ { hour: "12:00", name: "Jan", }, { hour: "12:00", name: "Bartek ", }, { hour: "12:00", name: "Kamil", }, ]); const addRideHandler = (data) => { setRides(data); }; return ( <RidesContext.Provider value={{ ridesList: rides, onAdd: addRideHandler, }} > {props.children} </RidesContext.Provider> ); }; export default RidesContext;