The state in React Context does not change - reactjs

Question

I have been practicing with React Context, but I have a problem with storing a user in my general state, the problem is that I have to click the save button twice to save the state in my context, with the first click I only see that the state is as an empty object and with the second click the state is saved (the name and password), this is the code I have. This would be the context of my application:
import { createContext } from "react";
const UserContext = createContext()
export default UserContext
this would be my types file:
export const LOGIN= 'LOGIN'
this is my UserState file:
import { useReducer } from "react"
import UserReducer from './UserReducer'
import UserContext from "./UserContex"
const UserState = ({ children }) => {
const initialState = {
usernew: {}
}
const [state, dispatch] = useReducer(UserReducer, initialState)
const login = (userLogin) => {
dispatch({
type: 'LOGIN',
payload: userLogin
})
window.localStorage.setItem('user', JSON.stringify(state.usernew))
const data = window.localStorage.getItem('user')
console.log(data)
}
return (
<UserContext.Provider
value={{
usernew: state.usernew,
login,
}}
>
{children}
</UserContext.Provider>
)
}
export default UserState
UserReducer file:
import {LOGIN} from "../types";
export default (state, action) => {
const { payload, type } = action;
switch (type) {
case LOGIN:
return {
...state,
usernew: payload
}
default:
return state
}
}
and this would be my component where I am changing the context:
import { Box, Button } from '#chakra-ui/react'
import { Input } from '#chakra-ui/react'
import { useState } from 'react'
import { useContext } from 'react'
import UserContext from '../context/User/UserContex'
const Login = () => {
const { login, usernew} = useContext(UserContext)
const [fields, setFields] = useState({
name: '',
password: ''
})
const handleChange = (e) => {
const name = e.target.name;
const value = e.target.value;
setFields({
...fields,
[name]: value
})
}
return (
<Box w='80%' p={4}>
<Input
placeholder='Name'
onChange={handleChange}
name="name"
value={fields.name}
/>
<Input
placeholder='Password'
onChange={handleChange}
name="password"
value={fields.password}
/>
<Button bg="teal" color="#fff" onClick={() => login(fields)}>Submit</Button>
{usernew ?
<div>
<h2>Usuario con {usernew.name} - {usernew.password}</h2>
</div>
:
<div>
<h1>Sin usuario</h1>
</div>
}
</Box>
)
}
export default Login
I checked all the code but I can't find the error, that's why I'm showing all the code I have. Thank you for your attention