How Can I call useCollection hook again with updated parameters

When My Home component(image above) mounts for the first time, it gives call to the hook "useCollection" with the arguments below, Now how can I call useCollection hook again with a different set of arguments for filtering my list,

It gives error calling to a function by using onClickButon handlers as well I m not able to use "UseState" as useState does not call the above hook again.

useCollection Hook

 import React, { useEffect, useRef, useState } from "react";
 import { projectFirestore } from "../firebase/config";

 export const useCollections = (collection, _query, _orderBy) => {
 const [documents, setDocuments] = useState(null);
 const [error, setError] = useState(null);

 const query = useRef(_query).current;
 const orderBy = useRef(_orderBy).current;

 useEffect(() => {

    let ref = projectFirestore.collection(collection);

    if (query) {
      ref = ref.where(...query);
    }

    if (orderBy) {
      ref = ref.orderBy(...orderBy);
    }

    const unsubscribe = ref.onSnapshot(
      (snapshot) => {
        let results = [];
        snapshot.docs.forEach((doc) => {
          results.push({ ...doc.data(), id: doc.id });
        });

        setDocuments(results);
        setError(null);
      },
      (error) => {
        console.log(error);
        setError("could not fetch data");
      }
    );

    return () => unsubscribe();
  }, [collection, query, orderBy]);

  return { documents, error };
};