Prisma mapping to table causing Hydration Error in Next 13

I have just spun up a simple project in Next.js 13. Not doing much else in my project, the following is causing a Hydration Error:

import { PrismaClient } from "@prisma/client";

export default async function Events() {
  const prisma = new PrismaClient();
  const issues = await prisma.event.findMany();
  return (
    <div>
      <h1>Events</h1>
      <table>
        <tr>
          <th>Title</th>
          <th>Description</th>
          <th>Code</th>
        </tr>
        {issues.map((issue, key) => (
          <tr key={key}>
            <td>{issue.title}</td>
            <td>{issue.description}</td>
            <td>{issue.code}</td>
          </tr>
        ))}
      </table>
    </div>
  );
}

I suspect that this could be Next.js 13 related but cannot see anything that could trigger this (I would assume that the view if only shown once its loaded as per the new next behaviour).

The layout does nothing but wrap this in a div:

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <head>
        <title>App</title>
        <meta name="description" />
      </head>
      <body>{children}</body>
    </html>
  )
}

Any ideas?

Solution

Wrapping the header row of the table in a and body in a solved the issue.

This is as per the discussion here: https://github.com/vercel/next.js/discussions/36754