I'm working on an app and I am trying to allow a user to filter items based on a category titles or view all. With this code, I able to get all the items that have been added by a given user, but I'd like to be able to filter by category as well, and show all the items if no category is selected.

export const ClothingListItems = ({ category }) => {
  const [items, setItems] = useState([]);
  const userUid = auth.currentUser.uid;
  const [isLoading, setIsLoading] = useState(false);
  const [isError, setIsError] = useState(false);

  //getting items where closetceator Uid == userUid
  const getClosetAsync = async ({category}) => {
    setIsLoading(true);
    try {
      const q = query(
        collection(db, "clothing"),
        where("closetOwerUid", "==", userUid)
      );

      onSnapshot(q, (snapshot) => {
        let results = [];
        snapshot.forEach((doc) => {
          results.push({ ...doc.data(), id: doc.id });
        });
        setItems(results);
        setIsLoading(false);
      });
    } catch (error) {
      setIsError(error.message);
    }
  };

  // Keep track with changes in data add or delete. Clean up!
  useEffect(() => {
    const unsubscribe = getClosetAsync();
    return () => unsubscribe;
  }, []);

  return isLoading ? (
    <LoadingIndicator />
  ) : isError || !items.length ? (
    <>
      <Error />
      <EmptyView message="Your closet is empty, add items." marginSize={65} />
    </>
  ) : (
    <View style={styles.container}>
      <>
        <FlatList
          data={items}
          keyExtractor={(item) => item.id}
          numColumns={2}
          renderItem={({ item }) => <ClothingItem items={item} />}
        />
      </>
    </View>
  );
};