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

function Navbar() {
  const classes = useStyles()

  // Get auth from redux state
  const auth = useSelector(state => state.firebase.auth)
  const authExists = isLoaded(auth) && !isEmpty(auth)

  return (
    
      {authExists ? (
        
      ) : (
        <button data-test="sign-in">
          Sign In
        </button>
      )}
    
  )

withProps(({ auth, profile }) => ({
    authExists: isLoaded(auth) && !isEmpty(auth)
  })),
  // Flatten profile so that avatarUrl and displayName are props

componentDidUpdate(prevProps: Props) {
        const { auth, navigation } = this.props;
        if (auth !== prevProps.auth) {
            if (isLoaded(auth) && !isEmpty(auth)) {
                navigation.navigate('ProjectNav');
            }
        }
    }

render() {
    const activity = this.props.activity || {};
    const problemSolutions = this.props.problemSolutions || {};
    const { open, dialogData, showSolutionFor } = this.state;
    const { student, solution } = dialogData || {};
    if (
      isLoaded(this.props.activity) &&
      this.props.uid !== this.props.activity.owner
    ) {
      return (
        
          You are not the owner of this activity.
        
      );
    }
    const hasLoaded =
      isLoaded(this.props.activity) && isLoaded(this.props.problemSolutions);

    if (!hasLoaded) {
      return (
        
          Loading...

checkAuthStatusAndStage = () => {
    const { userId, storeId, history } = this.props
    const { refreshIntervalId } = this.state

    if (ReactReduxFirebase.isLoaded()) {
      clearInterval(refreshIntervalId)

      this.setState({ loading: false })

      if (userId && storeId) {
        history.push(ROUTE.PATH.STORE)
      }

      if (userId && !storeId) {
        history.push(ROUTE.PATH.SIGN_UP_STORE)
      }
    }
  }

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>
  );
}

<div>
        <h2>react-redux-firebase demo</h2>
        <img alt="logo" src="{logo}">
      </div>
      <div>
        <h4>
          Loaded From
          <span>
            <a href="https://redux-firebasev3.firebaseio.com/">
              redux-firebasev3.firebaseio.com
            </a>
          </span>
        </h4>
        <h4>Todos List</h4>
        {
          !isLoaded(todos)
            ? 'Loading'
            : isEmpty(todos)
              ? 'Todo list is empty'
              : todos.reverse().map(({ value: todo, key }, ind) =&gt; (
                
              ))
        }
        
      </div>
    
  )
}

isLoaded = (): boolean => {
    const { auth, items, orders, currentUser, currentStore } = this.props
    return ReactReduxFirebase.isLoaded(
      auth,
      items,
      orders,
      currentUser,
      currentStore
    )
  }
}