Sign In button, when I click it, it connects to Azure, you log in and it returns the email of the person who logged in. The goal is to update the "permission" status, I already did console.log but it doesn't update but it prints the user type "admin".

function handleLogin(instance) {
instance.loginPopup(loginRequest).catch(e => {
    console.error(e);
});

}

/*Renders a button which, when selected, will open a popup for login*/

export const SignInButton = ({name, nameChange, user}) => {
  const url = "http://localhost:5000/flask/verify";
  const [permission, setPermision] = useState({val : "null"});
  useEffect(() => {
    Axios.post(url, {
        correo : user,
    })
        .then((res)=>{
            console.log("response: ", res.data);
            setPermision({val : res.data});
        })
        
        .catch((error) => {
            console.log(error);
          });
   }, [user])

const { instance } = useMsal();
console.log('permission:', permission);
return (
    <button className="btn" type="button" onClick={() => {handleLogin(instance);}}>SignIn</button>
);
}

information from the console