Установить состояние массива после получения всех документов в коллекции Firestore, которые не работают должным образом

Question

У меня есть 3 документа в моей коллекции Firestore, и я пытаюсь установить их в состоянии React (Array). Я пробовал следующее:

function App() {
  const [test, setTest] = useState([]);

  useEffect(() => {
    db.collection('shoes')
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
          setTest([...test, doc.data()]);
        });
      });
  }, []);
  return (
    <ShoesContext.Provider value={addShoes}>
      <div className="App">
        <Route exact path="/" component={Shoes} />
      </div>
    </ShoesContext.Provider>

Проблема в том, что он устанавливает только первый документ в моей коллекции. Тем не менее, следующий код работает:

const thehell = [];

function App() {
  const [test, setTest] = useState([]);

  useEffect(() => {
    db.collection('shoes')
      .get()
      .then(querySnapshot => {
        querySnapshot.forEach(doc => {
         thehell.push(doc.data());
        });
        setTest(thehell);
      });
  }, []);
  return (
    <ShoesContext.Provider value={addShoes}>
      <div className="App">
        <Route exact path="/" component={Shoes} />
      </div>
    </ShoesContext.Provider>
  );
}

export default App;

Является ли второй подход наилучшим подходом для установки состояния массива после извлечения всех документов из коллекции пожарного депо? Почему мой первый код не работает? Спасибо!