Успешно извлеченные данные Firestore не отображаются (React)

Я создал компонент таблицы лидеров в React, который отображает список имен и результатов различных людей. Я успешно извлекаю данные из Firestore, и они выводятся на мою консоль, но никогда не отображаются на экране.

Я считаю, что это должно быть что-то внутри хука Effect, но я не уверен, что с этим не так, когда смотрю на другие ответы. Это также может быть связано с тем, что моя переменная LeaderboardData никогда не заполняется.

Код для получения данных:

const fetchLeaderboardData = async() => {
db.collection('Leaderboard').get()
  .then(snap => {
    snap.docs.map(doc => {
      console.log(doc.data())
      return {
        ...doc.data(),
        id: doc.id,
        ref: doc.ref
      }
    })
  })
}

Хук эффекта:

const [leaderboardData, setLeaderboardData] = useState([])
useEffect(() => {
(async () => {
  const newLeaderboardData = await fetchLeaderboardData();
  setLeaderboardData(newLeaderboardData);
})();
}, [])

Код для рендеринга:

return (
<div className="wrapper">
  <div className="lboard_section">
    <div className="lboard_tabs">
      <div className="tabs">
        <ul>
          <li>All Time</li>
        </ul>
      </div>
    </div>
    <div className="lboard_wrap">
    {leaderboardData && leaderboardData.map(item => {
      <div key={item.id} className="lboard_mem">
        <div className="namebar">
          <p>{ item.name }</p>
        </div>
        <div className="points">
          { item.score + " "} points
        </div>
      </div>
    })}
    </div>
  </div>
</div>
);