Hi, could you help me solve the following problem:

"use client";
import React, { useState } from "react"; // Replace with your actual library import
import { useForm } from "react-hook-form";
import axios from "axios";
import { zodResolver } from "@hookform/resolvers/zod";
import { IssueSchema } from "../../validationSchemas";
import { Input } from "@/components/ui/input";
import {
  Dialog,
  DialogContent,
  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
} from "@/components/ui/dialog";
import { Button } from "@/components/ui/button";
import { Textarea } from "@/components/ui/textarea";
import {
  Select,
  SelectContent,
  SelectGroup,
  SelectItem,
  SelectLabel,
  SelectTrigger,
  SelectValue,
} from "@/components/ui/select";

const YourComponentWithDialog = () => {
  const [open, setOpen] = useState(false);
  const {
    register,
    handleSubmit,
    formState: { errors },
  } = useForm({
    resolver: zodResolver(IssueSchema),
  });

  const onSubmit = async (data) => {
    try {
      // Include the selected severity level in the form data
      const formData = {
        title: data.title,
        description: data.description,
        severity: data.severity,
      };

      // Send data to the server using Axios
      const response = await axios.post("/api/issues", formData);

      console.log("Server response:", response.data);
      setOpen(false); // Close the dialog after successful submission
    } catch (error) {
      console.error("Error submitting form:", error);
    }
  };

  return (
    <div>
      <Dialog open={open} onOpenChange={setOpen}>
        <DialogTrigger asChild>
          <Button variant="outline">Create a Ticket</Button>
        </DialogTrigger>
        <DialogContent className="sm:max-w-[425px] bg-zinc-950">
          <DialogHeader>
            <DialogTitle>Create a Ticket</DialogTitle>
            <DialogDescription>
              This form allows you to create a ticket. Click Submit when you're
              done.
            </DialogDescription>
          </DialogHeader>

          {/* Form inside the DialogContent */}
          <form onSubmit={handleSubmit(onSubmit)}>
            <label>Title</label>
            <Input {...register("title")} />
            {errors.title && <p>{errors.title.message}</p>}

            <label>Description</label>
            <Textarea {...register("description")} />
            {errors.description && <p>{errors.description.message}</p>}

            <Select {...register("severity")}>
              <SelectTrigger className="w-[180px]">
                <SelectValue placeholder="Severity Level" />
              </SelectTrigger>
              <SelectContent>
                <SelectGroup>
                  <SelectItem value="low">LOW</SelectItem>
                  <SelectItem value="medium">Medium</SelectItem>
                  <SelectItem value="high">High</SelectItem>
                  <SelectItem value="critical">Critical</SelectItem>
                </SelectGroup>
              </SelectContent>
            </Select>

            <Button type="submit">Submit</Button>
          </form>
        </DialogContent>
      </Dialog>
    </div>
  );
};

export default YourComponentWithDialog;

Here's my ZOD schema:

import { z } from 'zod';

export const IssueSchema = z.object({
    title: z.string().min(10, 'A minimum of 10 characters are required.').max(255),
    description: z.string().min(30, 'A minimum of 30 characters are required.'),
    severity: z.enum(['low', 'medium', 'high', 'critical']),
});

When clicking submit, nothing happens. It worked before I added the dropdown options with severity. I would appreciate some help