Не могу использовать «использовать клиент», это сломало мою выборку с помощью next.JS 13

Question

Я новичок в React и Next.JS, в настоящее время я пробую какой-то небольшой проект, чтобы привыкнуть к Next.JS 13, и я пытался просто получить данные из API: https://www.dnd5eapi.co/.

Сначала я извлекаю некоторые данные из своегоpage.jsв/appкаталог. Пока нет проблем. Затем я создал[classe]папка сpage.jsxвнутри него. Я получил данные сparamsи я могу легко отобразить некоторые данные, используя этот код:

      export default async function ClassesDetail({ params }) {
  const { classe } = params;
  const data = await fetch(`https://www.dnd5eapi.co/api/classes/${classe}`);
  const res = await data.json();

  const skills = res.proficiency_choices[0].from.options.map((skill) => ({
    name: skill.item.name.slice(6),
    index: skill.item.index.slice(6),
  }));

  const skillsData = await Promise.all(
    skills.map(async (skills) => {
      const data = await fetch(
        `https://www.dnd5eapi.co/api/skills/${skills.index}`
      );
      const res = await data.json();
      return res;
    })
  );

  return (
    <div>
      <div>
        <h1>{res.name}</h1>
        <h2>
          Proficiencies : {res.proficiency_choices[0].desc}
        </h2>
        <div>
          {skillsData.map((skill) => {
            const matchedSkill = skills.find((s) => s.index === skill.index);
            return (
              <div key={skill.index}>
                <h3>{matchedSkill.name}</h3>
                <p>{skill.desc}</p>
              </div>
            );
          })}
        </div>
      </div>
      <div>
        <Link href="./">
          Back Home
        </Link>
      </div>
    </div>
  );

Но я хотел поставитьonClickна{skill.desc}например, но как только я попытаюсь использовать"use client"я получил сообщение об ошибке

      const skills = res.proficiency_choices[0].from.options.map((skill) => ({
     |                                ^
  11 |       name: skill.item.name.slice(6),
  12 |       index: skill.item.index.slice(6),
  13 |     }));

и это :

      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.

И если честно, я не знаю, почему. Может кто-нибудь объяснить мне, что это за ошибка и почему эта ошибка появляется только при переходе на клиент.

Заранее спасибо. Хорошего дня.

Я попытался создать клиентский компонент внутри вызова папкиcomponentи я также попытался создать асинхронную функцию внутри моегоexport default function ClassesDetail()но ошибка была та же.