Netlify form submission yeld 404 with AJAX

Hi,
I’m trying to use Netlify forms with NextJS and React-hook-forms, to avoid the code swapping during build, I’ve figured that just sending an AJAX request would be the easier way to implement it, but when submitting I’m getting a 404. Below is my code:

The submit function

  const onSubmit = async (data: IWaitListForm) => {
    const value = new URLSearchParams({
      ...data,
      "form-name": "waitlist",
      "netlify-honeypot": "age",
    }).toString();
    const result = await fetch("/", {
      method: "POST",
      headers: { "Content-Type": "application/x-www-form-urlencoded" },
      body: value,
    });
  };

The form:

          <form onSubmit={handleSubmit(onSubmit)}>
            <Input
              {...register("name", { required: true })}
              label="Your name"
              status={errors.name ? "error" : "default"}
            />
            <Input
              {...register("email", { required: true })}
              label="Your email"
              type="email"
              status={errors.email ? "error" : "default"}
            />
            <div style={{ display: "none" }}>
              <Input
                name="age"
                label="Your Age"
                type="number"
                status={errors.email ? "error" : "default"}
              />
            </div>
            <Button type="submit">Join the waitlist</Button>
          </form>

And that’s basically what’s in that page for now. Any ideas why this could be failing?

Thanks in advance!

hi there, did you read this guide already?