I'm creating a blog and for some reason I'm getting a hydration error:

Error: Text content does not match server-rendered HTML.
See more info here: https://nextjs.org/docs/messages/react-hydration-error

Text content did not match. Server: "Tue Apr 23 2024" Client: "Wed Apr 24 2024"

// index.tsx
import BlogCard from '@/components/BlogCard';
import { getAllPosts } from '@/lib/api';
import type { Post } from '@/lib/api';

type Props = {
  posts: Post[];
};

export default function Page({ posts }: Props) {
  return (
    <div>
      {posts.map((post) => (
        <BlogCard
          title={post.title}
          description={post.description}
          slug={post.slug}
          date={post.date}
          coverImage={post.coverImage}
        />
      ))}
    </div>
  );
}

export async function getStaticProps() {
  const posts = getAllPosts();

  return {
    props: { posts },
  };
}

// BlogCard.tsx
type Props = {
  title: string;
  description: string;
  date: string;
  coverImage: string;
  slug: string;
};

export default function BlogCard({ title, description, date, coverImage, slug }: Props) {
  return (
    <Link
      href={`/blog/${slug}`}
    >
      <img src={coverImage}/>
      <div>
        <h3>
          {title}
        </h3>
        <p>{description}</p>
        <p>{new Date(date).toDateString()}</p>
      </div>
    </Link>
  );
}

Any ideas on what I'm doing wrong? Seems like it's an issue with the Date