Hello! I'm trying to do a ssr table that whenever we click on a tr it takes me to a different route. The table looks like this

    <table className="table-auto">
      <thead>
        <tr>
          <th>Restaurant</th>
          <th>Location</th>
          <th>Price Range</th>
          <th>Popular Dish</th>
        </tr>
      </thead>
      <tbody>
        {database.map((page) => (
          <tr key={page.id}>
            {/* <Link href={page.id}> */}
            <td>{page.properties.name.title[0].text.content}</td>
            <td>{page.properties.location.rich_text[0].text.content}</td>
            <td>{page.properties.price_range.select.name}</td>
            <td>{page.properties.popular_dish.rich_text[0].text.content}</td>
            {/* </Link> */}
          </tr>
        ))}
      </tbody>
    </table>

I can't understand why whenever I uncomment the link it stoppes working and it gives me 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 <a> in <tr>.

i'm getting the values stored in database from an API call.

Thanks in advance!