I am attempting to use server actions to pass a function from a server componenet to a client component. However, I am having a hard time getting it to work as I am running into the error Error: Functions cannot be passed directly to Client Components unless you explicitly expose it by marking it with "use server".

Server Action in Question:

  async function uploadAudioFile (audioFile: File) {
    "use server"

    const fileId = uuidv4()
    const {data, error} = await supabase.storage.from("audio").upload(user?.id + "/" + fileId, audioFile)
    if (data) {
      uploadAudioItem(fileId)
    } else {
      console.log(error)
    }
  }

Call to Client File

<AudioRecorder uploadAudioFile={uploadAudioFile}/>

Head of Client File

"use client"
import { useState, useRef } from "react";

const mimeType = "audio/mpeg-3";

const AudioRecorder = ({uploadAudioFile}) => {