Hello, I have a prisma async function called addStudentToClass and I want it to be used in a JoinClass Component But I can't get it to work. The component takes in the user's id as props and then has an input for a class code which then will be used to run this async function. Code Below:

"use client";
import { useState, FormEvent } from "react";
import { Button } from "@/components/ui/button";
import { Card, CardContent } from "@/components/ui/card";
import { Label } from "@/components/ui/label";
import { Input } from "@/components/ui/input";
import { addStudentToClass } from "@/lib/a";

export default function JoinClassCard({ userId }: { userId: string }) {
  const [classCode, handleClassCodeInput] = useState("");

  return (
    <div className="mt-8">
      <h2 className="text-2xl font-bold mb-4 text-[#ff6b6b]">Join a Class</h2>
      <Card className="bg-white rounded-lg shadow-md">
        <CardContent className="p-6">
          <form>
            <div className="grid gap-4">
              <div className="grid gap-2">
                <Label htmlFor="classCode">Class Code</Label>
                <Input
                  id="classCode"
                  value={classCode}
                  onChange={(e) => handleClassCodeInput(e.target.value)}
                  required
                />
              </div>
              <Button type="submit" className="justify-self-end" onClick={() => addStudentToClass(classCode, userId)}>
                Join Class
              </Button>
            </div>
          </form>
        </CardContent>
      </Card>
    </div>
  );
}

My async prisma function is below as well:

export async function addStudentToClass(
  classId: string,
  studentId: string,
): Promise<Class> {
  return await prisma.class.update({
    where: { classId },
    data: {
      students: {
        connect: { id: studentId },
      },
    },
  });
}