I am trying to implement very basic data fetching pattern where server streams in data using a suspense boundary but it fails in build. This works perfectly fine in development environment but the build fails as component is returning a promise which doesn't make sense because it is already handled by suspense boundary wrapping it. please let me know if this is a bug or just me being dumb.

async function Titles ({ UserID }: { UserID: string }){
    const titles = await await prisma.messageGroup.findMany({
        where:{userId: UserID,}})
    return (
        <>
            <div className="flex flex-col mt-2">
                {titles.map((title, index) => 
                    <Link key={index} className="text-purple-500 mt-4" href={`/chat/${title.id}`}>{title.Title}</Link>
                )}
            </div>
        </>
    )
}
export default async function ChatLayout(props: {
    children: React.ReactNode,
}){
    const session = await getServerSession(authConfig);

    if (!session) {
        return (
            <>
                <div className="pt-16 min-h-screen">
                    <NotAllowedChat />
                </div>
            </>
        )
      }

    return (
        <>
    <div className="pt-16 min-h-screen flex">
      <div className="w-1/6 flex flex-col items-center">
        <Sidebar session={session}/>
        <Suspense fallback={<p>Loading...</p>}>
          <Titles UserID={session.user.id}/>
            </Suspense>
      </div>
    <GoodDivider />
    {props.children}
        </div>
        </>
    );
}