I'm using Next-Auth in my NextJS 13 application. I configured all the essentials and when I try to login with my next-auth, It redirects me to the "http://localhost:3000/api/auth/error" and throws the error "Failed to load resource: the server responded with a status of 405 ()".
These are my code in "app/api/auth/[...nextaut]/route.ts"

export const authOptions: AuthOptions = {
  adapter: PrismaAdapter(prisma),
  providers: [
    CredentialsProvider({
      name: "credentials",
      credentials: {
        email: { label: "Email", type: "text" },
        password: {
          label: "Password",
          type: "password",
        },
      },
      async authorize(credentials) {
        if (!credentials?.email || !credentials.password) {
          throw new Error("Invalid credentials!");
        }
        const user = await prisma.user.findUnique({
          where: {
            email: credentials.email,
          },
        });
        if (!user || !user?.hashedPassword) {
          throw new Error("Invalid credentials!");
        }

        const isPasswordCheck = await bcrypt.compare(
          user.hashedPassword,
          credentials.password
        );

        if (!isPasswordCheck) {
          throw new Error("Invalid credentials!");
        }

        return user;
      },
    }),
  ],
  pages: {
    signIn: "/",
  },
  debug: process.env.NODE_ENV === "development",
  session: {
    strategy: "jwt",
  },
  secret: process.env.NEXTAUTH_SECRET,
};

And this is my login function,

const onSubmit = (data: FormData) => {
    signIn("credentials", {
      ...data,
      redirect: false,
    }).then((callback) => {
      if (callback?.ok) {
        toast.success("Logged In!");
        router.refresh();
        setOpenLoginModal(false)
      } else if (callback?.error) {
        toast.error(callback?.error);
        console.error(callback?.error);
      }
    });
  };

The values are sending correctly as a "data". Any help on this would be appreciated.