Using preload functions

[catgirlinspace]

Hi. I'm trying to preload both Auth and Firestore in my App component. So far I have this. I am not using Suspense.

// App.js
function App() {
  const firebaseApp = useFirebaseApp();

  preloadFirestore({
    firebaseApp,
    setup: firestore => firestore().enablePersistence({
      synchronizeTabs: true,
    })
  })

  preloadAuth({
    firebaseApp,
  })

  // returns router and stuff

In other components I'm using useAuth and useUser. For example, this is a component I'm using for displaying info in the navbar.

// UserDropdown.js
export default function UserDropdown() {
	const auth = useAuth()
	const { status, data: user } = useUser()
	
	return <div className="absolute inset-y-0 right-0 flex items-center pr-2 sm:static sm:inset-auto sm:ml-6 sm:pr-0">

		{/* Profile dropdown */}
		{status === "success" ? (user ? <Menu as="div" className="ml-3 relative">
			{({ open }) => (
				<>
					<div>
						<Menu.Button className="flex text-sm rounded-full p-2">
							<span className="sr-only">Open user menu</span>
							<span className="text-gray-800 dark:text-gray-50">{user.displayName}</span>
						</Menu.Button>
					</div>
					<Transition
						show={open}
						as={Fragment}
						enter="transition ease-out duration-100"
						enterFrom="transform opacity-0 scale-95"
						enterTo="transform opacity-100 scale-100"
						leave="transition ease-in duration-75"
						leaveFrom="transform opacity-100 scale-100"
						leaveTo="transform opacity-0 scale-95"
					>
						<Menu.Items
							static
							className="origin-top-right absolute right-0 mt-2 w-48 rounded-md shadow-lg py-1 bg-white ring-1 ring-black dark:bg-gray-500 dark:ring-white ring-opacity-5 focus:outline-none"
						>
							<Menu.Item>
								{({ active }) => (
									<button
										className={classNames(
											active ? 'bg-gray-100 dark:bg-gray-600' : '',
											'block px-4 py-2 text-sm text-gray-700 dark:text-gray-50 w-full text-left'
										)}
										onClick={() => signout(auth)}
									>
										Log Out
									</button>
								)}
							</Menu.Item>
						</Menu.Items>
					</Transition>
				</>
			)}
		</Menu> : <Link to="signin" className={classNames('text-gray-1000 dark:text-gray-300 hover:bg-gray-700 hover:text-white', 'px-3 py-2 rounded-md text-sm font-medium')}>Sign in</Link>) : <Spinner />}
	</div>
}

Currently I get the error below. How would I fix this so it just displays a loading spinner thing while preloading?

ReactFire: "firebase/auth" not found. Please import it in your component, or call preloadAuth and wait for it to resolve. ReactFire can only auto-import Firebase libraries if Suspense mode is enabled.