In a server component, I have this code:

// /app/page.tsx
import { getReadingTime, pages } from "@/lib/notion";

import BlogLink from "@/components/BlogLink";
//import MainContainer from "@/components/Main";

export default async function Home({}) {
  const posts = await pages();

  return (
    <>
      {posts.results.map(async (i) => {
        const time = await getReadingTime(i["id"]);
        return (
          <BlogLink
            key={i["id"]}
            titulo={`${i["properties"]["Nome"]["title"][0]["text"]["content"]}`}
            link={`${i["properties"]["Slug"]["rich_text"][0]["text"]["content"]}`}
            readingTime={`${time.minutes}`}
          ></BlogLink>
        );
      })}
    </>
  );
}

In line 10, when I change React.Fragment to a <div>, I get this error "Hydration failed because the initial UI does not match what was rendered on the server."; I'm using Next.js 14

Also, here's my BlogLink component

// /components/BlogLink.tsx
"use client";

import styled from "styled-components";
import Link from "next/link";

interface Props {
  titulo: string;
  link: string;
  readingTime: string;
}

// ESTILOS

const Container = styled.div`
  display: flex;
  flex-direction: column;
  background-color: #680057;
  width: 50%;
`;

export default function BlogLink({ titulo, link, readingTime }: Props) {
  return (
    <Container>
      <Link href={`/blog/${link}`}>
        <div>
          <h2>{titulo}</h2>
          <p>{`Tempo estimado: ${readingTime} minutos`} </p>
        </div>
      </Link>
    </Container>
  );
}