I'm trying to use async and await in Server Components, i replicated the example in the docs in the picture below (Image 1), the docs also says to use TypeScript 5.1.3 or higher and @types/react 18.2.8 or higher, which i did and i also restarted my typescript Typescript Server, but i'm still getting the same error (Image 2)

My code

import { Suspense } from "react";

async function getArtist(username: string) {
  const res = await fetch(`https://api.example.com/artist/${username}`);
  return res.json();
}

async function getArtistAlbums(username: string) {
  const res = await fetch(`https://api.example.com/artist/${username}/albums`);
  return res.json();
}

export default async function Page() {
  // Initiate both requests in parallel
  const artistData = getArtist("drake");
  const albumData = getArtistAlbums("scorpion");

  // Wait for the artist's promise to resolve first
  const artist = await artistData;

  return (
    <>
      <h1>{artist.name}</h1>
      {/* Send the artist information first,
          and wrap albums in a suspense boundary */}
      <Suspense fallback={<div>Loading...</div>}>
        <Albums promise={albumData} />
      </Suspense>
    </>
  );
}

// Albums Component
async function Albums({
  promise,
}: {
  promise: Promise<{ id: ""; name: "" }[]>;
}) {
  // Wait for the albums promise to resolve
  const albums = await promise;

  return (
    <ul>
      {albums.map((album) => (
        <li key={album.id}>{album.name}</li>
      ))}
    </ul>
  );
}

  "dependencies": {
    "@types/node": "20.3.0",
    "@types/react": "18.2.11",
    "@types/react-dom": "18.2.4",
    "autoprefixer": "10.4.14",
    "eslint": "8.42.0",
    "eslint-config-next": "13.4.5",
    "next": "13.4.5",
    "postcss": "8.4.24",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "tailwindcss": "3.3.2",
    "typescript": "5.1.3"
  }
}