Reactjs – Error handling with useEffect in React for async situations to close a popup

I need to implement error handling in my application. I am adding a user group with a pop-up. After sending a request, I need to show an error message if it comes from the backend. However, I’m having trouble understanding JavaScript async functions. I created a useEffect hook, and if there is an error, I set it using useState and display it in the pop-up. But if there is no error, I want to close the pop-up. The problem is that the error is initially null, so there is no side effect created, and I cannot control it with an if statement. Only after receiving some errors and then sending a new request that doesn’t throw an error, the pop-up closes. I believe the issue lies in the useEffect hook. Maybe I should initialize the error in the beginning? Any help would be greatly appreciated. Here’s the relevant code:

I’m encountering an issue where the error is already null in the beginning, so it doesn’t create a side effect and I can’t control it with the if statement. I want to be able to close the pop-up when there is no error. How can I achieve this?

const RoleList: React.FC<RoleListComponentProps> = (props) => {
    useWebservice(true, loadUserRoles);
    const roles = useSelector(selectUserRoles);
    const selectedRole = useSelector(selectSelectedRole);
    let roleError: string | null = useSelector(selectUserRoleErrorMessage);
    const msalContext: IMsalContext = useMsal();
    const dispatch = useDispatch();

    // ...other state and functions...


    useEffect(() => {
        if (typeof roleError === "string" && roleError === "Employees: Request failed with status code 409") {
            setGroupNameError("This user group is already created before!");
        } else if (typeof roleError === "string") {
            setGroupNameError(roleError);
        } else {
            handleCloseAddGroupPopup();
        }
    }, [dispatch, roleError, handleCloseAddGroupPopup]);

    return (
        <ListComponent
            // ...other props...
        />
    );
};

export default RoleList;