Use State is updating the value but the new value is not rendering when i am mapping through the followingUser

Question

This is my Code

const [followingUser , setFollowingUser] = useState([])
const USER_DATA = async () => {
    let FollowingUser = []
    let UserData = JSON.parse(localStorage.getItem("UserData"))
    if (UserData !== null) {
        UserData.Following.map(async (user)=>{
            await axios.get(`${baseUrl}/user/${user}`).then((res)=>{
                let singleFollowing = res.data.User[0]
                FollowingUser.push(singleFollowing)
            }).catch((err)=>{
                console.log(err)
            })
        })
    }
    console.log(FollowingUser)
    setFollowingUser(FollowingUser)
    console.log(followingUser)
}

useEffect(() => {
    USER_DATA()
}, [])

return (
    <div className='flex flex-col space-y-5 mt-6 mb-2 pl-20 pt-2'>
        {
            followingUser.map((ele) => (
                <div key={ele._id} >
                    <img src={ele.Image} alt="" />
                    <div >
                        <span >{ele.Name}</span>
                        <span >{ele.Email}</span>
                    </div>
                    <span >Remove</span>
                </div>
            ))
        }
    </div>
)

console.log(FollowingUser) is showing the correct output that i want to set in the state . after updating the state when i print the state value it shows the blank array as you can see in the image !

Desired Output