React не перерисовывает мой компонент при изменении массива?

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

const [sort, setSort] = useState("option1");
  const [listings, updateListings] = useState([]);

  const db = getFirestore();
  const colRef = collection(db, "Listing");

  useEffect(() => {
    let defaultListings = [];
    getDocs(colRef)
      .then((snapshot) => {
        snapshot.docs.forEach((doc) => {
          defaultListings.push({ ...doc.data(), id: doc.id });
        });
      })
      .catch((err) => {
        console.info(err.message);
      });
    updateListings(defaultListings);
  }, []);
 return(<Listing list = {listings} sortoption = {sort} />)

этот компонент листинга показывает сетку

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