Hey there i am trying to convert this jquery to tsx and i am having some issues

$(".nav__trigger").on("click", function (e) {
  e.preventDefault();
  $(this).parent().toggleClass("nav--active");
});

my initial approach

const button = document.querySelector(".nav__trigger");
console.log(button);
button?.addEventListener("click", function (this: any, e: any) {
  console.log("clicked");
  e.preventDefault();
  document.querySelector(this).parent().classList.toggle(".nav--active");
});

Uncaught DOMException: Failed to execute 'querySelector' on 'Document': 'http://localhost:3000/#' is not a valid selector.
    at HTMLAnchorElement

Also i am not sure if the approach i am taking is right or not