Here is my clinet component:

const stopRecording = async() => {
        setRecordingStatus("inactive");
        mediaRecorder.current.stop();

        mediaRecorder.current.onstop = async() => {
            const audioBlob = new Blob(audioChunks, { type: mimeType });
            const audioUrl = URL.createObjectURL(audioBlob);
            setAudio(audioUrl);
            await uploadAudioFile(audioBlob);
            setAudioChunks([]);
        };
    };

Here is my server component:

"use server"

import { Database } from "@/lib/database.types";
import { createServerComponentClient } from "@supabase/auth-helpers-nextjs";
import { cookies } from "next/headers";
import {v4 as uuidv4} from 'uuid'
import uploadAudioItem from "./uploadAudioItem"

export default async function uploadAudioFile (audioBlob: Blob) {
    const supabase = createServerComponentClient<Database>({ cookies });
    const { data: { user }} = await supabase.auth.getUser()
    const fileId = uuidv4()
    const audioFile = new File([audioBlob], "recording.mp3")
    console.log("I HAVE REACHED THIS POINT")
    const {data, error} = await supabase.storage.from("audio").upload(user?.id + "/" + fileId, audioFile, {
      contentType: "audio/mpeg"
    })
    if (data) {
      await uploadAudioItem(fileId)
    } else {
      console.log(error)
    }
  }

Why is it that NextJS thinks I'm passing a Blob from a server component to a client component.