https://nextjs.org/docs/app/building-your-application/data-fetching/fetching#sequential-data-fetching

My page.tsx

async function fetchPageData() {
  const currentUser = await getCurrentUser();
  if (!currentUser) redirect('/login');

  const providerData = currentUser.providerData[0];
  const isPasswordUser = providerData.providerId === 'password';

  return {
    isPasswordUser,
  };
}

export default async function ProfilePage() {
  return (
    <>
      <Heading type={4}>Profile</Heading>
      <Suspense fallback={<LoadingProfile />}>
        <ProfileAndPasswordForm />
      </Suspense>
      <LogoutForm />
    </>
  );
}

async function ProfileAndPasswordForm() {
  const { isPasswordUser } = await fetchPageData();
  
  return (
    <>
      <ProfileForm />
      {isPasswordUser && <SecurityForm />}
    </>
  );
}

When running yarn build

yarn build
yarn run v1.22.19
$ next build
  ▲ Next.js 14.2.5
  - Environments: .env.local

   Creating an optimized production build ...
Browserslist: caniuse-lite is outdated. Please run:
  npx update-browserslist-db@latest
  Why you should do it regularly: https://github.com/browserslist/update-db#readme
 ✓ Compiled successfully
   Linting and checking validity of types  .Failed to compile.

./app/settings/profile/page.tsx:31:10
Type error: 'ProfileAndPasswordForm' cannot be used as a JSX component.
  Its return type 'Promise<Element>' is not a valid JSX element.
    Type 'Promise<Element>' is missing the following properties from type 'Element': type, props, key

  29 |       <Heading type={4}>Profile</Heading>
  30 |       <Suspense fallback={<LoadingProfile />}>
> 31 |         <ProfileAndPasswordForm />
     |          ^
  32 |       </Suspense>
  33 |       <LogoutForm />
  34 |     </>
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.