Reactjs – I can't see any of my form values in the console upon submission

Why am I not able to see values in my console? Everything is correctly in place but the form values can’t be seen in the console. I think it has something to do with the onSubmit function. Any help would be greatly appreciated.

The form Schema using Zod:

/* creating a schema */
const formSchema = z.object({
  firstName: z.string().min(1, {
    message: 'First Name is required'
  }),
  lastName: z.string().min(1, {
    message: 'Last Name is required'
  }),
  email: z.string().email({
    message: 'Invalid email address'
  }),
  numberOfKids: z.number().min(1, {
    message: 'Number of kids must be at least 1'
  }).int({
    message: 'Number of kids must be an integer'
  })
});

The onSubmit function:

  const onSubmit = async (values: z.infer<typeof formSchema>) => {
    console.log(values);
  };

The return statement (where the onSubmit function is being called) :

return (
    <>
      <Form {...form}>
        <form onSubmit={form.handleSubmit(onSubmit)}>
          {/* FIRST NAME */}
          <FormField
            control={form.control}
            name="firstName"
            render={({ field }) => (
              <FormItem>
                <FormLabel>
                  First Name
                </FormLabel>
                <FormControl>
                  <Input {...field} placeholder="" />
                </FormControl>
              </FormItem>
            )}
          />
...