Empty array on getDocs FIrebase 9 React Native

I am trying to get all documents from my firebase cloud but getting an empty array. Tried different SO suggestions but none seem to work. Here is my code:

Component:

import { Button, Image, Platform, SafeAreaView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
import React, { useEffect, useLayoutEffect, useRef, useState } from 'react';
import { collection, onSnapshot, query, where } from "firebase/firestore";

import Carousel from 'react-native-snap-carousel';
import ProfileScreenItem from "../components/screens/ProfileScreenItem";
import SideBar from "../components/SideBar";
import {db} from '../firebase'
import tw from 'tailwind-react-native-classnames';
import {useWindowDimensions} from 'react-native';

interface Props {
    navigation: any,
    route: any,
  };
const ProfilesScreen: React.FC<Props> = ({ navigation, route}) => {
  const carouselRef = useRef()
  const [activeIndex, setActiveIndex] = useState<number>()
  const windowHeight = useWindowDimensions().height;
  const windowWidth = useWindowDimensions().width;
  navigation.setOptions({
    headerShown: false,
  }) 
  useLayoutEffect(() => {
    let values: any = [];
    const q = query(collection(db, "values"));
    const getValues = onSnapshot(q, (querySnapshot) => {
      querySnapshot.forEach((doc) => {
          values.push(doc.data());
      });
    });
    getValues()
    console.log(values)
  }, [])
    return(
      <SafeAreaView style={{flex: 1, backgroundColor:'white', paddingTop: 50, }}>
      <View style={{ flex: 1, flexDirection:'row', justifyContent: 'center', paddingTop:20}}>
            <Carousel
              layout={"default"}
              ref={carouselRef}
              data={carouselItems}
              sliderWidth={windowWidth}
              itemHeight={windowHeight}
              itemWidth={windowWidth}
              renderItem={ProfileScreenItem}
              onSnapToItem = {(index : number) => setActiveIndex(index)} 
            />
         </View>
        <SideBar carouselRef={carouselRef}/>
      </SafeAreaView>
    )
}

export default ProfilesScreen;

Firebase config: All the values for firebase config are filled in, just have removed it for posting purposes

import { collection, getDocs, getFirestore } from "firebase/firestore";

import { getAuth } from "firebase/auth";
import { initializeApp } from 'firebase/app';

const firebaseConfig = {
  apiKey: "",
  authDomain: "",
  projectId: "",
  storageBucket: "",
  messagingSenderId: "",
  appId: "",
  measurementId: ""
};

const app = initializeApp(firebaseConfig);
const db = getFirestore(app);

const auth = getAuth(app);

export { db,auth};

EDIT: I have also tried using a hook instead of the uselayouteffect:

 export const useFireStore = (mycollection : string) => {
      const [docs, setDocs] = useState<any>([]);
    
      useEffect(() => {
        const unsub = onSnapshot(collection(db, mycollection), (querySnapshot) => {
          const documents = querySnapshot.docs.map((doc) => {
            return {
              ...doc.data(),
            }
          });
          setDocs(documents);
        });
        return () => unsub();
      }, [mycollection])
    }
  
  
const ProfilesScreen: React.FC<Props> = ({ navigation, route}) => {
  const carouselRef = useRef()
  const [activeIndex, setActiveIndex] = useState<number>()
  const [categories,setCategories] = useState<string[]>([]);
  const [values,setValues] = useState<string[]>([]);
  const windowHeight = useWindowDimensions().height;
  const windowWidth = useWindowDimensions().width;
  navigation.setOptions({
    headerShown: false,
  }) 
  const docs = useFireStore('values')
 
  useEffect(() => {
    // console.log("docs",docs)
    }, []);
    return(
      <SafeAreaView style={{flex: 1, backgroundColor:'white', paddingTop: 50, }}>
      <View style={{ flex: 1, flexDirection:'row', justifyContent: 'center', paddingTop:20}}>
            <Carousel
              layout={"default"}
              ref={carouselRef}
              data={carouselItems}
              sliderWidth={windowWidth}
              itemHeight={windowHeight}
              itemWidth={windowWidth}
              renderItem={ProfileScreenItem}
              onSnapToItem = {(index : number) => setActiveIndex(index)} 
            />
         </View>
        <SideBar carouselRef={carouselRef}/>
      </SafeAreaView>
    )
}

export default ProfilesScreen;

Just for clarity as well I am using "firebase": "^9.9.4" version with the intention of having the most up to date firebase and also to sort some issues I was having with older versions.