Updating useContext with multiple properties - reactjs

Question

I am rying to update a 'user' from my useContext hook.
The use context checks with an axios call to see if the user is authenticated but would also handle the login and the logout.
here are my contexts and custom hooks I made to access those
authContextProvider.js
const AuthContext = React.createContext();
const LoginContext = React.createContext()
const LogoutContext = React.createContext();
const useAuth = () => {
return useContext(AuthContext);
}
const useLogin = () => {
return useContext(LoginContext)
}
const useLogout = () => {
return useContext(LogoutContext)
}
and this is my provider:
authContextProvider.js
const AuthProvider = ({children}) => {
const [auth, setAuth] = useState(false);
useEffect(() => {
axios.get("api/auth")
.then((result) => {
if(result.data.auth) {
setAuth(result.data.auth)
}
})
.catch(err => {
throw err;
})
}, [])
const login = (email, password) => {
axios.post('api/login', {
email: email,
password: password
})
.then((response) => {
console.log(response.data.auth)
setAuth(response.data.auth)
})
}
const logout = () => {
axios.get('api/logout')
.then(response => {
console.log("User has been logged out.")
setAuth(false)
})
}
return (
<AuthContext.Provider value={auth}>
<LoginContext.Provider value={login}>
<LogoutContext.Provider value={logout}>
{children}
</LogoutContext.Provider>
</LoginContext.Provider>
</AuthContext.Provider>
)
}
Problem:
In my login component, I would use the useLogin hook to trigger my API call to log in with an email and password. But I cannot seem to figure out how to pass those from my login component to my context as props.
Login.js
const Login = () => {
const [email, setEmail] = useState('');
const [password, setPassword] = useState('');
// this is where my email and password would be send to my context
const handleLogin = useLogin()
return (
<>
Login
<div className={'loginForm'}>
<label htmlFor="email">Email</label>
<input type="email" id={'email'} name={'email'} onChange={(e) => {setEmail(e.target.value)}}/>
<br/>
<label htmlFor="password">Password</label>
<input type="password" id={'password'} name={'password'} onChange={(e) => {setPassword(e.target.value)}}/>
<br/>
<button onClick={() => handleLogin}>Go !</button>
</div>
<br/>
<br/>
< />
);
}
My quesion
How do I pass those props?
Or is this not intended and should this be done differently