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

Warning: Expected server HTML to contain a matching <table> in <div>.

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

Error: There was an error while hydrating. Because the error happened outside of a Suspense boundary, the entire root will switch to client rendering.

<tbody>
  {[1, 1, 1, 1, 1, 1, 1, 1].map((item, index) => (
    <Columns
      order="#8786"
      date="January 5, 2024"
      status="Paid"
      total="$1500"
      action="View Details"
      key={index} // Use the index as the key
    />
  ))}
</tbody>

interface Iprops {
  order: string;
  date: string;
  status: string;
  total: string;
  action: string;
}

function Columns({ order, date, status, total, action }: Iprops) {
  return (
    <tr>
      <td>{order}</td>
      <td>{date}</td>
      <td>{status}</td>
      <td>{total}</td>
      <td>
        <button>{action}</button>
      </td>
    </tr>
  );
}

export default Columns;

<p>
something
<p>another thing</p
</p>