How can I fix the “Hydration failed” error in my Next.js table component?

Question

Next.js (13.4.16) i get this error

*Unhandled Runtime Error Error: Hydration failed because the initial UI does not match what was rendered on the server.

Warning: Expected server HTML to contain a matching in .

See more info here: https://nextjs.org/docs/messages/react-hydration-error

Component Stack table section* My code

<section className="mt-24 w-full h-full flex justify-center">
  <table className="min-w-max bg-white border border-gray-200 rounded-lg overflow-hidden">
    <thead className="bg-gray-100 text-gray-600 uppercase text-sm leading-normal ">
      <tr className="bg-gray-100 text-gray-600 uppercase text-sm leading-normal">
        <th className=" py-3 px-6 text-left">ID</th>
        <th className=" py-3 px-6 text-left">NAME</th>
        <th className=" py-3 px-6 text-left">ACTION</th>
      </tr>
    </thead>
    <tbody className=" text-gray-600 text-sm font-light">
      {data.todos.map((todo: any) => {
        <tr key={todo.id} className="border-b border-gray-200 hover:bg-gray-100">
          <td className="py-3 px-6">
            {todo.id}
          </td>
          <td className="py-3 px-6">
            {todo.name}
          </td>
          <td className="py-3 px-6">
            <button>DELETE</button>
          </td>
        </tr>
      })};
    </tbody>
  </table>
</section>

im following a course, on the video i dont see any problem neither following docs could anyone help me solve this problem