How to use the react-redux-firebase.useFirestoreConnect function in react-redux-firebase

const dispatch = useDispatch();
    const firebase = useFirebase();
    const isCurrentUser = firebase.auth().currentUser.uid === params.id;
    const userProfileQuery = useMemo(() => ({
        collection: 'users',
        doc: params.id,
        storeAs: 'userProfile'
    }), [params.id]);

    const userPhotosQuery = useMemo(() => ({
        collection: 'users',
        doc: params.id,
        subcollections: [{collection: 'photos'}],
        storeAs: 'photos'
    }), [params.id]);
    useFirestoreConnect(userProfileQuery); // needs to be query object so can either get profile from store
    useFirestoreConnect(userPhotosQuery); // needs to be query object so can store as

    const profile = useSelector(state => (state.firestore.ordered.userProfile && state.firestore.ordered.userProfile[0]) || {});
    const photos = useSelector(state => state.firestore.ordered.photos && state.firestore.ordered.photos);
    const userEvents = useSelector(state => state.user.events) || [];
    const loading = useSelector(state => state.async.loading);

    useEffect(() => {
        dispatch(getUserEvents(params.id));
    }, [dispatch, params]);

    const handleChangeTab = async (e, data) => {
        console.log(data);
        dispatch(getUserEvents(params.id, data.activeIndex));
    };

const firebase = useFirebase();
    const isCurrentUser = firebase.auth().currentUser.uid === params.id;
    const userProfileQuery = useMemo(() => ({
        collection: 'users',
        doc: params.id,
        storeAs: 'userProfile'
    }), [params.id]);

    const userPhotosQuery = useMemo(() => ({
        collection: 'users',
        doc: params.id,
        subcollections: [{collection: 'photos'}],
        storeAs: 'photos'
    }), [params.id]);
    useFirestoreConnect(userProfileQuery); // needs to be query object so can either get profile from store
    useFirestoreConnect(userPhotosQuery); // needs to be query object so can store as

    const profile = useSelector(state => (state.firestore.ordered.userProfile && state.firestore.ordered.userProfile[0]) || {});
    const photos = useSelector(state => state.firestore.ordered.photos && state.firestore.ordered.photos);
    const userEvents = useSelector(state => state.user.events) || [];
    const loading = useSelector(state => state.async.loading);

    useEffect(() => {
        dispatch(getUserEvents(params.id));
    }, [dispatch, params]);

    const handleChangeTab = async (e, data) => {
        console.log(data);
        dispatch(getUserEvents(params.id, data.activeIndex));
    };

    return (

const EventActivity = ({contextRef}) => {
    const query = useMemo(() => ({
        collection: 'activity',
        orderBy: ['timestamp', 'desc'],
        limit: 5,
        storeAs: 'activity'
    }), []);
    useFirestoreConnect(query);
    // useSelector case, to memoize a selector.  This ensure the useSelector will have exactly same selector every time the component re-render
    const activitySelector = useCallback(state => state.firestore.ordered.activity, []);
    const activities = useSelector(activitySelector);

    return (
        
            <header>
            
                
                    {activities &amp;&amp; activities.map(activity =&gt; (
                        
                    ))}
                
            
        
    );</header>

function useProjectsList() {
  const { showSuccess, showError } = useNotifications()
  const firestore = useFirestore()

  // Get auth from redux state
  const auth = useSelector(state => state.firebase.auth)

  useFirestoreConnect([
    {
      collection: 'projects',
      where: ['createdBy', '==', auth.uid]
    }
  ])

  // Get projects from redux state
  const projects = useSelector(state => state.firestore.ordered.projects)

  // New dialog
  const [newDialogOpen, changeDialogState] = useState(false)
  const toggleDialog = () => changeDialogState(!newDialogOpen)

  function addProject(newInstance) {
    if (!auth.uid) {
      return showError('You must be logged in to create a project')

function Todos() {
  // Attach todos listener
  useFirestoreConnect(() => [
    todosQuery
  ])
  
  // Get todos from redux state
  const todos = useSelector(({ firestore: { ordered } }) => ordered.todos)

  // Show a message while todos are loading
  if (!isLoaded(todos)) {
    return 'Loading'
  }
  
  // Show a message if there are no todos
  if (isEmpty(todos)) {
    return 'Todo list is empty'
  }

const PhotosPage = () => {
        const dispatch = useDispatch();
        const firestore = useFirestore();
        const firebase = useFirebase();

        const auth = useSelector(state => state.firebase.auth, []);

        const userPhotosQuery = useMemo(() => ({
            collection: 'users',
            doc: auth.uid,
            subcollections: [{collection: 'photos'}],
            storeAs: 'photos'
        }), [auth.uid]);

        // firestoreConnect equivalent
        useFirestoreConnect(userPhotosQuery);

        // mapstate equivalent

        const profile = useSelector(state => state.firebase.profile, []);
        const loading = useSelector(state => state.async.loading, []);
        const photos = useSelector(state => state.firestore.ordered.photos, []);

        // actions equivalent
        const [files, setFiles] = useState([]);
        const [cropResult, setCropResult] = useState('');
        const [image, setImage] = useState(null);


        useEffect(() => {
            return () => {
                files.forEach(file => URL.revokeObjectURL(file.preview));

const PeopleDashboard = () => {
    const auth = useSelector(state => state.firebase.auth);
    const followingQuery = useMemo(() => ({
        collection: 'following',
        doc: auth.uid,
        subcollections: [{collection: 'following'}],
        storeAs: 'following'
    }), [auth.uid]);
    const followerQuery = useMemo(() => ({
        collection: 'followers',
        doc: auth.uid,
        subcollections: [{collection: 'followers'}],
        storeAs: 'followers'
    }), [auth.uid]);
    useFirestoreConnect(followerQuery);
    useFirestoreConnect(followingQuery);
    const followers = useSelector(state => state.firestore.ordered.followers);
    const followings = useSelector(state => state.firestore.ordered.following);

    return (
        
            
                
                    <header>
                    
                        {followers &amp;&amp;
                        followers.map(follower =&gt; )}
                    
                
                
                    <header></header></header>

function List() {
  useFirestoreConnect([{
    collection: "todos",
  }]);
  const todos = useSelector((state: SystemState) => state.firebase.data.todos);
  if (!isLoaded(todos)) { return "Loading..."; }
  if (isEmpty(todos)) { return null; }
  return (
    <ul>
      {todos.map((todo: any) =&gt; (
        <li>{todo.name}</li>
      ))}
    </ul>
  );
}

const PeopleDashboard = () => {
    const auth = useSelector(state => state.firebase.auth);
    const followingQuery = useMemo(() => ({
        collection: 'following',
        doc: auth.uid,
        subcollections: [{collection: 'following'}],
        storeAs: 'following'
    }), [auth.uid]);
    const followerQuery = useMemo(() => ({
        collection: 'followers',
        doc: auth.uid,
        subcollections: [{collection: 'followers'}],
        storeAs: 'followers'
    }), [auth.uid]);
    useFirestoreConnect(followerQuery);
    useFirestoreConnect(followingQuery);
    const followers = useSelector(state => state.firestore.ordered.followers);
    const followings = useSelector(state => state.firestore.ordered.following);

    return (
        
            
                
                    <header>
                    
                        {followers &amp;&amp;
                        followers.map(follower =&gt; )}
                    
                
                
                    <header>
                    </header></header>