react-firebase-hooks: useDocumentData returns undefined on first render until forced browser refresh returns data

import { doc } from 'firebase/firestore';
import { createContext, useEffect, useState } from 'react';
import { auth, db } from '../firebase/firebase-config';
import {
  useDocumentData,
  useDocumentDataOnce,
} from 'react-firebase-hooks/firestore';
import { useAuthState } from 'react-firebase-hooks/auth';

const userAuthContext = createContext({});

const UserAuthContextProvider = ({ children }: any) => {

  const [authUser, loadingAuthUser, errorAuthUser] = useAuthState(auth);
  
  const [authUserDocRef, setAuthUserDocRef]: any = useState();
  
  const [userData, loading, error, snapshot, reload] =
    useDocumentDataOnce(authUserDocRef);

  const [businessDocRef, setBusinessDocRef]: any = useState();

  const [
    businessData,
    loadingBusinessData,
    errorBusinessData,
    snapshotBusinessData,
  ] = useDocumentData(businessDocRef);

  useEffect(() => {
    if (authUser) {
      setAuthUserDocRef(doc(db, 'users', authUser.uid));
    }

    if (userData) {
      setBusinessDocRef(userData.managedBusiness);
    }
  }, [authUser, userData]);

  return (
    <userAuthContext.Provider
      value={{ authUser, businessData, loadingBusinessData }}
    >
      {children}
    </userAuthContext.Provider>
  );
};

export { userAuthContext, UserAuthContextProvider };

businessData returns undefined. I have to manually force refresh the browser for businessData to return the correct value from Firestore.