Users.tsx

import React, { useContext, useEffect, useRef, useState } from 'react';
import { Error } from 'state/firebaseTypes';
import UserModel from 'state/users/userModel';
import { FirestoreContext } from 'context/FirestoreContextProvider';

//would be defined elsewhere
type FetchRequest<T, E = unknown> = { fetching: boolean; data: T; error: E | null };

const Users: React.FC = (): JSX.Element => {
  const [users, setUsers] = useState<FetchRequest<User[], Error>>({ fetching: true, data: [], error: null });
  const { firestore } = useContext(FirestoreContext);
  const UserCollection = new UserModel(firestore);

  useEffect(() => {
      (async () => {
         try {
           const data = await UserCollection.getAllUsers()
           await setUsers(prev => ({ ...prev, data }))
         } catch (error) {
            console.log(error);
            setUsers(prev => ({ ...prev, error }));
         }
      })();
    setUsers(prev => ({ ...prev, fetching: false }))
  }

...

}