How to change th value of a state property?

I am making a small application that obtains data, is displayed in the DOM, and chooses an item that displays the information of the chosen user, I handle all this through the state manager called UserState, where I also add the methods to display the users. And then as a component, I have UserList and UserProfile.

This is how should work, Capture 1

capture1

UserState.js

import React, {useState} from 'react';
import UserContext from './UserContext';
import axios from 'axios';

function UserState(props) {
const initialState = {
    users:[],
    selectedUser:null
}

const [state, setState] = useState(initialState) 

const getUsers = async() =>{
    const res = await axios.get("https://reqres.in/api/users")
    const data = res.data.data
    setState({users:data,
    selectedUser:null})
}

const getProfile = async (id) => {
    const res = await axios.get("https://reqres.in/api/users/"+id)
    const {data} = await res.data;
    console.log('Item Selected:',data)
    console.log(setState({selectedUser:data}))

}

return (
    <UserContext.Provider
        value={{
            users:state.users,
            selectedUser: state.selectedUser,
            getUsers,
            getProfile
            }}
    >
        {props.children}
    </UserContext.Provider>
)
}

export default UserState

I export That state and its methods through the Hook useContext, the problem starts when I try to choose a user, and the console shows me the following error.

UserList.js

import React,{useContext,useEffect} from 'react'
import UserContext from "../context/User/UserContext"

function UserList(props) {
const  userContext = useContext(UserContext)

useEffect(() => {
     userContext.getUsers();
},[])

return (
    <div>
        <h1>UserList</h1>
        {userContext.users.map(user=>{
            return(
            <a 
                key={user.id}
                href="#!"
                onClick={()=> userContext.getProfile(user.id)}
            >
                <img src={user.avatar} alt="" width="70"/>
                <p>{user.first_name} {user.last_name}</p>
                <p>{user.email}</p>
            </a>)
        }): null}
    </div>
)
}

export default UserList

Profile.js

import React,{useContext} from 'react'
import UserContext from '../context/User/UserContext'

function Profile() {
const {selectedUser} = useContext(UserContext)

return (
    <>
    <h1>Profile</h1>
    {selectedUser ? 
    (
    <div>
        <h1>Selected Profile</h1>
        {/* <img 
            src={selectedUser.avatar}
            alt=""
            style={{width:150}}
        /> */}
    </div>
    ):(<div>
        No User Selected
    </div>)}
    </>
)
}

export default Profile

Console Error

console error

I tried to change the value of selectedUser but every time the console shows me that error.

Answer

In your getProfile function, you should use setState like that.

setState({...state, selectedUser:data })

If you use setState({selectedUser:data }) then users is removed from state.