server component throws error

export default async function BotCommandsSection() {
  const commands: BotCommandsResponse = await fetch(
    `${BASE_URL}/api/commands`
  ).then((res) => res.json());
  console.log({ commands });

  if ('error' in commands) {
    return <p>{commands.error}</p>;
  }
  return commands.map((command) => (
    <BotCommandInfo data={command} key={command.id} />
  ));
}

export default async function BotCommandsSection() {
  const commands: BotCommandsResponse = await fetch(
    `${BASE_URL}/api/commands`
  ).then((res) => res.json());
  console.log({ commands });

  if ('error' in commands) {
    return <p>{commands.error}</p>;
  }
  return commands.map((command) => (
    <BotCommandInfo data={command} key={command.id} />
  ));
}

This server component throws the following error:

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Error: Objects are not valid as a React child (found: [object Promise]). If you meant to render a collection of children, use an array instead.

Why? i'm writing the server component and fetching data as the nextjs docs mentioned.

functionthatreturnsfalseOP•2/4/23, 1:42 PM

I forgot to delete the 'use client' directive in the parent component, my bad.

functionthatreturnsfalseOP•2/4/23, 1:42 PM

!close