I am immensely lost as to why I am getting this error.

This is the function which is calling the api.

const transcribeAudioFile = async(audioBlob: Blob) => {
        try {
            const reader = new FileReader();
            reader.readAsDataURL(audioBlob); 

            reader.onloadend = async function () {
              const readerResult : string | undefined = reader.result?.toString()
              console.log(readerResult)
              if (!readerResult) {
                throw Error("File Reader failed to read audio.")
              }
              const base64Audio = readerResult.split(',')[1]; // Remove the data URL prefix
              const response = await fetch("/api/transcription", {
                method: "POST",
                headers: {
                  'Content-Type': 'application/json'
                },
                body: JSON.stringify({ audio: base64Audio }),
              });
              console.log(response)
              const data = await response.json();
              if (response.status !== 200) {
                throw data.error || new Error(`Request failed with status ${response.status}`);
              }
              setTranscription(data.result);
            }
          } catch (error: any) {
            console.error(error);
            alert(error.message);
          }
    }

This is the route ts file that is causing the error

// Import necessary libraries
import { NextResponse } from "next/server";
// This function handles POST requests to the /api/transcription route
export async function POST(request: Request) {
  return NextResponse.json({result: "text"}, {status:200});
}