I am fetching some data from firebase in this page.js server component and passing it down to client component. The issue is, this page.js is taking almost 8 seconds to load. Each of the hook is fetching data from firebase and returning an array of objects with 3-4 key-value pairs per object. So I think that the data is not too much and it should not be taking this long.
Please suggest the solution.

// imports

const RAC = async () => {
  const cities = await useCitiesFromDB();
  const currencies = await useCurrenciesFromDB();
  const officeLocations = await useOfficesFromDB();
  const plots = await usePlotsFromDB();
  const styles = await useStylesFromDB();

  return (
    <>
      <section className="px-8 flex flex-col h-[calc(100vh-6rem)] lg:h-[calc(100vh-7rem)] sm:px-4">
        <div className="max-w-8xl mx-auto w-full flex items-center h-24 xl:h-20 lg:h-12">
          <div className="w-full flex justify-between items-center xs:items-start">
            <Link
              href={"/admin"}
              className="bg-accent-1-base rounded-full p-5 xl:p-4 md:hidden">
              <Image
                src={chevronLeftIcon}
                alt="chevron left"
                className="w-6 xl:w-4"
              />
            </Link>
            <H1
              text="roles, analystics & cities"
              className="mx-auto xl:text-2xl"
            />
          </div>
        </div>
        <RACClientPage
          cities={cities}
          currencies={currencies}
          officeLocations={officeLocations}
          plots={plots}
          styles={styles}
        />
      </section>
    </>
  );
};

export default RAC;