Button not submitting and working with form

[uhAlexz]

hello! I recently made this form thing for recommendations; however, it's not working whenever I click it. Nothing outputs and nothing works.

⌨️ Code

Function for submission:

const onSubmit: SubmitHandler<FormSchema> = async (data, event) => {
    console.log('Button has been clicked!')
    event?.preventDefault();
    
    try {
      
      const response = await axios.post("/api/discord-webhook", data);

      toast({
        title: "Success!",
        description: response.data.message || "Recommendation sent!"
      });
    } catch (err) {
      console.error("Failed to send recommendation: ", err);
      toast({
        title: "Failed.",
        description: "Failed to send recommendation."
      });
    }
  };

Form itself:

<Form {... form}>
  <form onSubmit={form.handleSubmit(onSubmit)}>
    <FormField
      control={form.control}
      name="recommendation"
      render={({ field }) => (
        <FormItem>
          <FormLabel>Recommendation</FormLabel>
          <FormControl>
            <Input placeholder="Suggestion here..." {...field} />
          </FormControl>
          <FormDescription>
            This is your suggestion/recommendation to the website!
          </FormDescription>
          <FormMessage />
        </FormItem>
      )}
    />
    <Button type="submit">Submit</Button> {/* This is the button I'm talking about */}
  </form>
</Form>

If you have any idea why this is happening, please let me know! * edit: I added an onclick event to the button, that works; however, the submitting doesnt.