Why my currentRole isn't set? [ReactJS & Firebase] - reactjs

Question

I attempted to set the state of currentRole, but it haven't changed anything when I set in setCurrentRole. At the same time, my console.log() is show the value of doc.data().role. How can I get'em?
import React, {useState, useEffect} from "react";
import firebase, {firestore} from "../utils/firebase";
export const AuthContext = React.createContext();
export const AuthProvider = ({children}) => {
const [loading,setLoading] = useState(true)
const [currentUser, setCurrentUser] = useState(null)
const [currentRole, setCurrentRole] = useState('')
useEffect(() => {
firebase.auth().onAuthStateChanged((user) => {
setCurrentUser(user)
loadingRole(user)
setLoading(false)
console.log(currentRole)
})
}, [])
function loadingRole (user) {
firestore.collection('users').where(firebase.firestore.FieldPath.documentId(), '==', user.uid).get().then((user) => {
user.docs.forEach(doc => {
console.log(doc.data().role)
var roleStr = await doc.data().role
setCurrentRole(roleStr)
})
})
}
if (loading) {
return <p> Loading... </p>
}
return (
<AuthContext.Provider value={{currentUser,currentRole}}>
{children}
</AuthContext.Provider>
)
}
Output:
Auth.js:16 -Have nothing- (console.log(currentRole))
Auth.js:23 Admin (console.log(doc.data().role) line)
LoginComplete.js:14 TgHoVElWCUTViiArtfAKgfNI2J33