I'm trying to create a google drive file using googleapi. The <button> inside my client component calls the function to create a file. I believe this function uses fs, and it's complaining because I can't use fs in a client component.

'use client'
import React from 'react'
import { drive as googleDrive, auth } from '@googleapis/drive'

async function createFile() {
  const client = new auth.OAuth2(
    process.env.GOOGLE_ID as string,
    process.env.GOOGLE_SECRET as string,
    "http://localhost:3000/api/auth/callback/google"
  );

  const drive = googleDrive(
    {
      version: "v3",
      auth: client
    }
  )
  
  const newFile = drive.files.create({
    requestBody: {
      name: "My first file!",
      mimeType: 'text/plain'
    },
    media: {
      mimeType: 'text/plain',
      body: "Some content"
    }
  })
}

const NewBoxButton = () => {
  return (
    <button onClick={async() => createFile()}>
    </button>
  )
}

export default NewBoxButton

So how am I suppose to create a button that runs this function that can only be called from server components, but I can only create buttons in client components?