Getting undfined while using context API please help

import { useState, useContext, useEffect } from "react";
import { UserSate } from "./context/State";

const UserForm = (props) => {
const [userDetails, setUserDetails] = useState({
firstName: "",
lastName: "",
dob: "",
gender: ""
});

const userContext = useContext(UserSate);

const { user } = userContext;

console.log("============>", user);

const onChange = (e) => {
setUserDetails({ ...userDetails, [e.target.name]: e.target.value });
};

const handleSubmit = (e) => {
const user = {};
user[e.target.name] = e.target.value;
console.log(user);

// updateUser(user);

setUserDetails({ ...userDetails, [e.target.name]: "" });

};

return (
<>
placeholder="firstName"
id="firstName"
name="fistName"
value={onChange}
/>
placeholder="lastName"
id="lastName"
name="lastName"
value={onChange}
/>


Submit
</>
);
};

export default UserForm;

=====================================================

import UserContext from "./State";
import bookings from "../Data/bookings";
import UserForm from "../UserSignUp";
import { useState } from "react";

const UserSate = (props) => {
const [user, setUser] = useState(bookings);

console.log("user", user);

const updateUser = () => {
console.log("anaaaa");
};

return (



);
};

export default UserSate;