I am trying to use a function at every element of a list. Normally you would use .map(), but .map() would return a list of promises when I tried it. Anyway I used .forEach() - I used a state variable to safe that value. The problem: The value somehow isn't displayed (only sometimes for a very short moment when I safe the code)

function Chats() {

    const [someListState, setSomeListState] = useState()

    useEffect(() => {
        async function fetchChatData() {
            const chatIds = userObject.chats
            
            const someList = []
           
            await chatIds.forEach(async (chatId) => {
                someList.push(await someAsyncFunction(chatId))
            });
            
            setSomeListState(someList)
        }

        fetchChatData()
    }, [userObject])   // userObject determined by authState   

    return (
        <div>
            <p>{someListState[0]}</p> // cant display anything
        </div>
    )
}