onSubmit with useCallback is not stepping into the metho

Question

I have a seemingly basic form for my site for people to join a waitlist on a splash page. Using examples I've found I've created the following method which will submit the email provided to my mongodb connection.

Upon clicking the submit button it will go to the onSubmit button but when I set the a break point within the useCallback it is not triggered. I cannot figure out what the issue is so thank you for the help.

const {
      register,
      handleSubmit,
      formState: { errors },
    } = useForm<FormData>({
      resolver: formValidation,
    });

    const onSubmit = useCallback(
      async (data: FormData): Promise<void> => {
        
        const waitlistDocument = {
          email: data.email
        };

        console.log(waitlistDocument);
  
        const response = await fetch('/api/waitlist', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/json',
          },
          body: JSON.stringify(waitlistDocument),
        });
  
        if (!response.ok) {
          setError('There was a problem adding you to the waiting list. Please try again later.');
          return;
        }
        else {
          console.log("successfully filed");
        }
      },[useCallback]);


return (
     <div className="join">
                  <p className="waitingList">Join our waiting list</p>
                  {error && <div className="error">{error}</div>}
                  <form onSubmit={handleSubmit(onSubmit)} className="form">
                    <Input
                      name="email"
                      label="Email Address"
                      required
                      register={register}
                      error={errors.email?.message}
                    />
                    <Button type="submit" label="Submit" appearance="primary" />
                  </form>
                </div>
)