I'm getting error Unhandled Runtime 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.
For what i would think is a very simpler server page component, can anyone help

async function getData() {
  return {
    id: "3",
    slug: "item-3",
    title: "item 3",
    image:
      "https://cdn.pixabay.com/photo/2023/07/12/07/07/cat-8121892_1280.jpg",
  };
}

export default async function PDP(params: { slug: string }) {
  console.log("params: ", params);
  const item = await getData();

  return (
    <div className="flex flex-col text-white">
      {/* <div>{item.title}</div> */}
    </div>
  );
}