setting state not working in react in a weird way - reactjs

Question

I made a hook to interact with my api:
import { useContext, useCallback } from "react";
import { toastContext } from "../trds";
export default function useAPIHook(){
const launchToast = useContext(toastContext);
const returnFunction = useCallback(async ({
user, url, fetchOptions = {}, okCallback = () => {}, failedCallback = () => {}
}) => {
const idToken = await user.getIdToken();
const apiResponse = await fetch(`${process.env.REACT_APP_BACKEND_URL}${url}?idToken=${idToken}`, fetchOptions);
const apiReturn = await apiResponse.json();
if(apiResponse.ok) okCallback(apiReturn);
else{
if(apiResponse.status === 400)
launchToast(apiReturn.error, 'error');
else{
console.log(apiReturn.error);
launchToast('Something went wrong. Contact the developer!', 'error');
}
failedCallback();
}
}, [launchToast]);
return returnFunction;
}
and then the users hook:
import { useContext, useState, useEffect } from "react";
import { userContext } from "../contexts/user";
import { toastContext } from "../trds";
import useAPIHook from "./useAPIHook";
export default function useUsers(){
const currentUser = useContext(userContext);
const api = useAPIHook();
const launchToast = useContext(toastContext);
const [users, setUsers] = useState([]);
useEffect(() => {
(async () => {
await api({
user: currentUser,
url: '/users',
okCallback: (returnedUsers) => {
setUsers(returnedUsers);
},
failedCallback: () => {
launchToast('Failed while fetching users!', 'error')
}
});
})();
}, [api, currentUser, launchToast]);
const createNewUser = async (userData) => {
await api({
user: currentUser,
url: '/users',
fetchOptions:{
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(userData)
},
okCallback: (newUser) => {
setUsers(prevState => [...prevState, newUser]);
launchToast('New user has been created!', 'success')
},
failedCallback: () => {
launchToast('Failed while creating user!', 'error')
}
});
}
const updateUser = async (userData) => {
await api({
user: currentUser,
url: `/users/${userData._id}`,
fetchOptions:{
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(userData)
},
okCallback: (updatedUser) => {
setUsers(prevUsers => {
return prevUsers.map(user => user._id === updatedUser._id ? updateUser : user);
});
launchToast('User has been updated!', 'success')
},
failedCallback: () => {
launchToast('Failed while updating user!', 'error')
}
});
}
const deleteUser = async (userData) => {
await api({
user: currentUser,
url: `/users/${userData._id}`,
fetchOptions:{
method: 'DELETE',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(userData)
},
okCallback: (deletedUser) => {
setUsers(prevUsers => {
return prevUsers.filter(user => user._id !== deletedUser._id);
});
launchToast('User has been deleted!', 'success');
},
failedCallback: () => {
launchToast('Failed while deleting user!', 'error')
}
});
}
return { users, createNewUser, updateUser, deleteUser }
}
my problem is that in the createNewUser function at okCallback, the state wont update with the newUser pushed to the state. nothing happens, like no errors, nothing. I debugged newUser 100 times and its good. setting the users state in the other functions (updateUser, deleteUser) is working properly. does anybody have an idea what could it be?
UPDATE: its not working in updateUser neither, only works in deleteUser
UPDATE 2: the updateUser and createNewUser are being called in my user form modal:
import { useEffect, useState, useContext, useCallback } from "react";
import { Button, Modal, toastContext } from "../trds";
import useUsers from "../hooks/useUsers";
const initialState = {
email: '',
name: '',
role: 'viewer'
};
export default function UserFormModal({userData, isOpen, onClose}){
const launchToast = useContext(toastContext);
const { createNewUser, updateUser } = useUsers();
const [data, setData] = useState(initialState);
const [isLoading, setIsLoading] = useState(false);
useEffect(() => {
if(userData) setData(userData);
}, [userData]);
const handleSubmit = async () => {
if(!data.email || !data.name){
return launchToast('You have to provide email and name!', 'error');
}
setIsLoading(true);
if(userData){
await updateUser(data)
} else {
await createNewUser(data);
}
setData(initialState);
onClose();
setIsLoading(false);
}
const handleClose = useCallback(() => {
setData(initialState);
onClose();
}, [onClose]);
return(
<Modal
title={userData ? 'Update user' : 'Create user'}
isOpen={isOpen}
onClose={handleClose}
>
<trds-stack style={{gap: 'var(--space--l)'}}>
<input
type="email"
name="userEmail"
placeholder="Email address"
value={data.email}
onChange={(e) => setData(prevState => ({...prevState, email: e.target.value}))}
/>
<input
type="text"
name="userName"
placeholder="Name"
value={data.name}
onChange={(e) => setData(prevState => ({...prevState, name: e.target.value}))}
/>
<trds-stack style={{gap: 0}}>
<label>Role</label>
<select
name="userRole"
onChange={(e) => setData(prevState => ({...prevState, role: e.target.value}))}
value={data.role}
>
<option value="viewer">Viewer</option>
<option value="technician">Technician</option>
<option value="admin">Admin</option>
</select>
</trds-stack>
<Button
text={userData ? 'Update user' : 'Create user'}
loading={isLoading}
onClick={handleSubmit}
/>
</trds-stack>
</Modal>
)
}
SO, it may have correlation...