Hi all, I have this Button component, which looks like this

"use client";

import $ from "jquery";

export default function FormSubmitButton() {
  const submit = async () => {
    const response = await fetch("/api/waitlist", {
      method: "POST",
      body: new URLSearchParams(new FormData(document.querySelector("form"))),
      credentials: "include",
    });

    const result = await response.json();

    if (!result.success) {
      console.error(result.error);
      window.alert(result.error);
      return;
    }

    $(".success-message").removeClass("d-none");
    $("form").addClass("d-none");
  };

  return (
    <button onClick={submit} type="submit" className="btn btn-primary">
      Submit
    </button>
  );
}

Notice how I am using jQuery to show and hide other components on the page, what is a better way to do this?