T3 Stack Page Routing Boilerplate does not work

I am trying to create an app using the T3 stack. I am following the instructions in the T3 documentation which start by telling us to use the command npm create t3-app@latest. After doing that, we get asked a bunch of questions about the preferred services we would like to use. I am choosing to work with NextAuth.js, tRPC, Drizzle, and Tailwind CSS. It also asks if we would like to use the App Routing feature of Next.js, but I do not want to use that.

According to the documentation, I should end up with a folder structure that looks like the one in this link. However, I have directory called /app inside the /src directory and it contains the NextAuth router instead of having a catch-all API handler for NextAuth inside /pages/api/auth (this directory does not even exist in my project). Additionally, I gets errors about imports made inside the next-auth npm package files inside node_modules.

I made the necessary changes to the next-auth npm package files to get rid of the errors to replace some imports such as:

import { NextRequest } from "next/server";

To something like this:

import { NextRequest } from "next/server.js";

And this removed the errors.

Then, I deleted the /src/app directory and created the /src/pages/api/auth directory and put the [...nextauth].ts file inside it. The content of my [...nextauth].ts file is as follows:

import NextAuth from "next-auth";
import { authConfig } from "~/server/auth/config";

export default NextAuth(authConfig);

Now, I am getting the following error:

 ⨯ [Error: Page /api/auth/[...nextauth] does not export a default function.]
 GET /api/auth/session 500 in 276ms

I couldn't find anything about this anywhere. What can I try next?