i have a problem , i've set my useContext with useState values in the provider , but when i import them and try to change the value , it change locally and not globally !

Login.js

import { UserContext } from './context/UserContext';


const loginD = (setStatue , username , password, user , setUser) => {
        axios.post("http://localhost:5050/login", {
            username : username,
            password : password
        }).then(response =>{
            if(response.data.statue)
            {
                setStatue(response.data.statue);
            }
            if(response.data.message)
            {
                setUser({
                    ...user,
                    _id : response.data.message[0].id,
                    username : response.data.message[0].username,
                    password : response.data.message[0].password,
                    name : response.data.message[0].name
                })
                console.log(user);//{id : "the id", username : "username" , password : "password"}
                localStorage.setItem("jwt", "logged in");
                setStatue("Succesfully Logged in");
            }
        })
}

Home.js

const Home = () => {
    const [user , setUser] = useContext(UserContext);
    return (
        <div>
            {console.log(user)} //{id:"",username:"",password:""}
            <p>Hello {user.username}</p>
        </div>
    )
}

UserContext.js

import React , {useState ,createContext} from "react";


export const UserContext = createContext({});

export const UserProvider = (props) => {
    const [user , setUser] = useState(
        {
            _id : "",
            username : "",
            password : "",
            name : ""
        }
    );
    return(
        <UserContext.Provider value = {[user, setUser]}>
            {props.children}
        </UserContext.Provider>
    );
};

it actually gives me the default values of the useState variable can someone explain to me what actually wrong ! thanks